newPeter7
2 years ago
38 changed files with 197 additions and 12175 deletions
@ -1,112 +0,0 @@ |
|||||
<template> |
|
||||
<div class="component-wrapper"> |
|
||||
<div class="year-select"> |
|
||||
<el-select v-model="yearSelect" placeholder="请选择"> |
|
||||
<el-option v-for="item2 in years" :key="item2.value" :label="item2.label" :value="item2.value" /> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
<div v-for="(item,index) in progressList" :key="index" v-loading="progressLoading" class="heatmap-wrapper"> |
|
||||
<div class="heatmap-head"> |
|
||||
<span class="heatmap-title">{{ item.name }}</span> |
|
||||
<span> {{ yearSelect }} </span> |
|
||||
</div> |
|
||||
<div class="heatmap-container"> |
|
||||
<calendar-heatmap :data-list="item.data||[]" :end-date="endDate" class="heatmap" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// import Cookies from 'js-cookie' |
|
||||
// window.SITE_CONFIG['dict_examItem'] |
|
||||
|
|
||||
import calendarHeatmap from '@/components/calendar-heatmap' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
calendarHeatmap |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
progressLoading: false, |
|
||||
progressList: [], |
|
||||
yearSelect: (new Date()).getFullYear(), |
|
||||
endDate: String((new Date()).getFullYear()) + '-12-31' |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
years() { |
|
||||
const result = [] |
|
||||
const thisYear = Number((new Date()).getFullYear()) |
|
||||
for (let i = 0; i < 10; i++) { |
|
||||
result.push({ |
|
||||
label: thisYear - i, |
|
||||
value: thisYear - i |
|
||||
}) |
|
||||
} |
|
||||
return result |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
yearSelect(val) { |
|
||||
this.getProgressList(val) |
|
||||
} |
|
||||
}, |
|
||||
created() { this.getProgressList() }, |
|
||||
mounted() { }, |
|
||||
methods: { |
|
||||
getProgressList(year) { |
|
||||
this.progressLoading = true |
|
||||
year = year || String((new Date()).getFullYear()) |
|
||||
const startDate = year + '-01-01' |
|
||||
const endDate = year + '-12-31' |
|
||||
this.endDate = endDate |
|
||||
// this.progressLoading = true |
|
||||
this.$http.get('/stats/examItem/allExtract', { params: { startDate, endDate }}) |
|
||||
.then(({ data: res }) => { |
|
||||
this.progressList = res.data |
|
||||
window.sessionStorage.setItem('progressList', JSON.stringify(this.progressList)) |
|
||||
this.progressLoading = false |
|
||||
}).catch(() => { this.progressLoading = false }) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
.component-wrapper { |
|
||||
min-height: 200px; |
|
||||
|
|
||||
.year-select{ |
|
||||
display: flex; |
|
||||
justify-content: center; |
|
||||
margin-bottom: 10px; |
|
||||
} |
|
||||
|
|
||||
.heatmap-wrapper { |
|
||||
margin-bottom: 10px; |
|
||||
|
|
||||
.heatmap-head { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
|
|
||||
.heatmap-title { |
|
||||
padding: 0 20px; |
|
||||
font-size: 16px; |
|
||||
font-weight: bolder; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.heatmap-container { |
|
||||
min-height: 130px; |
|
||||
// padding-left: 170px; |
|
||||
|
|
||||
.heatmap { |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,112 +0,0 @@ |
|||||
<template> |
|
||||
<div v-loading="progressLoading" class="component-wrapper"> |
|
||||
<div class="heatmap-wrapper"> |
|
||||
<div class="heatmap-head"> |
|
||||
<div class="heatmap-title"> |
|
||||
<el-select v-model="itemSelect" size="mini" placeholder="请选择" style="width:250px" filterable> |
|
||||
<el-option v-for="item in items" :key="item.itemId" :label="item.itemName" :value="item.itemId" /> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
<div class="year-select"> |
|
||||
<el-select v-model="yearSelect" size="mini" placeholder="请选择" style="width:80px"> |
|
||||
<el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value" /> |
|
||||
</el-select> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="heatmap-container"> |
|
||||
<calendar-heatmap :data-list="dataList" :end-date="endDate" class="heatmap" /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import calendarHeatmap from '@/components/calendar-heatmap' |
|
||||
|
|
||||
export default { |
|
||||
components: { |
|
||||
calendarHeatmap |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
progressLoading: false, |
|
||||
dataList: [], |
|
||||
itemSelect: window.SITE_CONFIG['dict_examItem'][0].itemId, |
|
||||
yearSelect: (new Date()).getFullYear(), |
|
||||
endDate: String((new Date()).getFullYear()) + '-12-31' |
|
||||
} |
|
||||
}, |
|
||||
computed: { |
|
||||
years() { |
|
||||
const result = [] |
|
||||
const thisYear = Number((new Date()).getFullYear()) |
|
||||
for (let i = 0; i < 10; i++) { |
|
||||
result.push({ |
|
||||
label: thisYear - i, |
|
||||
value: thisYear - i |
|
||||
}) |
|
||||
} |
|
||||
return result |
|
||||
}, |
|
||||
items() { |
|
||||
return window.SITE_CONFIG['dict_examItem'] |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
yearSelect() { |
|
||||
this.getProgressList() |
|
||||
}, |
|
||||
itemSelect() { |
|
||||
this.getProgressList() |
|
||||
} |
|
||||
}, |
|
||||
created() { this.getProgressList() }, |
|
||||
mounted() { }, // this.itemSelect = window.SITE_CONFIG['dict_examItem'][8].itemId |
|
||||
methods: { |
|
||||
getProgressList() { |
|
||||
this.progressLoading = true |
|
||||
const year = this.yearSelect |
|
||||
const startDate = year + '-01-01' |
|
||||
const endDate = year + '-12-31' |
|
||||
this.endDate = endDate |
|
||||
this.$http.get('/stats/examItem/extract', { params: { code: this.itemSelect, startDate, endDate }}) |
|
||||
.then(({ data: res }) => { |
|
||||
this.dataList = res.data |
|
||||
this.progressLoading = false |
|
||||
}).catch(() => { this.progressLoading = false }) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang='scss' scoped> |
|
||||
.component-wrapper { |
|
||||
min-height: 200px; |
|
||||
|
|
||||
.heatmap-wrapper { |
|
||||
margin-bottom: 10px; |
|
||||
|
|
||||
.heatmap-head { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
margin-bottom: 20px; |
|
||||
|
|
||||
.heatmap-title { |
|
||||
padding: 0 20px; |
|
||||
font-size: 16px; |
|
||||
font-weight: bolder; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.heatmap-container { |
|
||||
min-height: 130px; |
|
||||
// padding-left: 170px; |
|
||||
|
|
||||
.heatmap { |
|
||||
height: 100%; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,72 +0,0 @@ |
|||||
<template> |
|
||||
<el-table :data="data" class="table-wrapper" :show-header="showHeader" style="width: 100%"> |
|
||||
<el-table-column type="index" width="44" /> |
|
||||
<el-table-column prop="name" :label="colTitle" width="150" show-overflow-tooltip /> |
|
||||
<!-- <el-table-column prop="num" :label="colNum" header-align="center" width="100" align="left" /> --> |
|
||||
<el-table-column header-align="center" min-width="150" align="left"> |
|
||||
<!-- scope.row.num --> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-progress :stroke-width="10" :percentage="toPercentage(scope.row.num)" :format="format" /> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</el-table> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
props: { |
|
||||
data: { type: Array, required: true }, |
|
||||
showHeader: { type: Boolean, default: false }, |
|
||||
colTitle: { type: String, default: '排名' }, |
|
||||
colNum: { type: String, default: '数量' } |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
totalNum: 0, |
|
||||
valMap: {} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
data: { |
|
||||
deep: true, |
|
||||
handler(newVal, oldVal) { |
|
||||
this.data.forEach(item => { |
|
||||
this.totalNum += item.num || 0 |
|
||||
}) |
|
||||
}, |
|
||||
immediate: true |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
toPercentage(val) { |
|
||||
if (val === 0 || this.totalNum === 0) return 0 |
|
||||
const perVal = (Math.round(val / this.totalNum * 10000) / 100)// 小数点后两位百分比 |
|
||||
this.valMap[perVal] = val |
|
||||
return perVal |
|
||||
}, |
|
||||
format(percentage) { |
|
||||
return this.valMap[percentage] |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.table-wrapper { |
|
||||
|
|
||||
::v-deep .el-table th { |
|
||||
background-color: transparent; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-table td, |
|
||||
::v-deep .el-table th.is-leaf { |
|
||||
border-bottom: 0px; |
|
||||
} |
|
||||
|
|
||||
::v-deep .el-progress-bar__inner, |
|
||||
::v-deep .el-progress-bar__outer { |
|
||||
border-radius: 0%; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,7 +0,0 @@ |
|||||
import RenDeptTree from './src/ren-dept-tree' |
|
||||
|
|
||||
RenDeptTree.install = function(Vue) { |
|
||||
Vue.component(RenDeptTree.name, RenDeptTree) |
|
||||
} |
|
||||
|
|
||||
export default RenDeptTree |
|
||||
@ -1,121 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<el-input v-model="showDeptName" :placeholder="placeholder" @focus="deptDialog"> |
|
||||
<el-button slot="append" icon="el-icon-search" @click="deptDialog" /> |
|
||||
</el-input> |
|
||||
<el-input :value="value" style="display: none" /> |
|
||||
<el-dialog :visible.sync="visibleDept" width="30%" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false"> |
|
||||
<el-form size="mini" :inline="true"> |
|
||||
<el-form-item :label="$t('keyword')"> |
|
||||
<el-input v-model="filterText" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="default">{{ $t('query') }}</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<el-tree |
|
||||
ref="tree" |
|
||||
class="filter-tree" |
|
||||
:data="deptList" |
|
||||
:default-expanded-keys="expandedKeys" |
|
||||
:props="{ label: 'name', children: 'children' }" |
|
||||
:expand-on-click-node="false" |
|
||||
:filter-node-method="filterNode" |
|
||||
:highlight-current="true" |
|
||||
node-key="id" |
|
||||
/> |
|
||||
<template slot="footer"> |
|
||||
<el-button type="default" size="mini" @click="cancelHandle()">{{ $t('cancel') }}</el-button> |
|
||||
<el-button v-if="query" type="info" size="mini" @click="clearHandle()">{{ $t('clear') }}</el-button> |
|
||||
<el-button type="primary" size="mini" @click="commitHandle()">{{ $t('confirm') }}</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script> |
|
||||
export default { |
|
||||
name: 'RenDeptTree', |
|
||||
props: { |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
value: [Number, String], |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
deptName: String, |
|
||||
query: Boolean, |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
placeholder: String |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
filterText: '', |
|
||||
visibleDept: false, |
|
||||
deptList: [], |
|
||||
showDeptName: '', |
|
||||
expandedKeys: null, |
|
||||
defaultProps: { |
|
||||
children: 'children', |
|
||||
label: 'label' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
filterText(val) { |
|
||||
this.$refs.tree.filter(val) |
|
||||
}, |
|
||||
deptName(val) { |
|
||||
this.showDeptName = val |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
deptDialog() { |
|
||||
this.expandedKeys = null |
|
||||
if (this.$refs.tree) { |
|
||||
this.$refs.tree.setCurrentKey(null) |
|
||||
} |
|
||||
this.visibleDept = true |
|
||||
this.getDeptList(this.value) |
|
||||
}, |
|
||||
filterNode(value, data) { |
|
||||
if (!value) return true |
|
||||
return data.name.indexOf(value) !== -1 |
|
||||
}, |
|
||||
getDeptList(id) { |
|
||||
return this.$http.get('/sys/dept/list').then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
this.deptList = res.data |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.tree.setCurrentKey(id) |
|
||||
this.expandedKeys = [id] |
|
||||
}) |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
cancelHandle() { |
|
||||
this.visibleDept = false |
|
||||
this.deptList = [] |
|
||||
this.filterText = '' |
|
||||
}, |
|
||||
clearHandle() { |
|
||||
this.$emit('input', '') |
|
||||
this.$emit('update:deptName', '') |
|
||||
this.showDeptName = '' |
|
||||
this.visibleDept = false |
|
||||
this.deptList = [] |
|
||||
this.filterText = '' |
|
||||
}, |
|
||||
commitHandle() { |
|
||||
const node = this.$refs.tree.getCurrentNode() |
|
||||
if (!node) { |
|
||||
this.$message.error(this.$t('dept.chooseerror')) |
|
||||
return |
|
||||
} |
|
||||
this.$emit('input', node.id) |
|
||||
this.$emit('update:deptName', node.name) |
|
||||
this.showDeptName = node.name |
|
||||
this.visibleDept = false |
|
||||
this.deptList = [] |
|
||||
this.filterText = '' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,7 +0,0 @@ |
|||||
import RenRadioGroup from './src/ren-radio-group' |
|
||||
|
|
||||
RenRadioGroup.install = function(Vue) { |
|
||||
Vue.component(RenRadioGroup.name, RenRadioGroup) |
|
||||
} |
|
||||
|
|
||||
export default RenRadioGroup |
|
||||
@ -1,22 +0,0 @@ |
|||||
<template> |
|
||||
<el-radio-group :value="value+''" @input="$emit('input', $event)"> |
|
||||
<el-radio v-for="data in dataList" :key="data.dictValue" :label="data.dictValue">{{ data.dictLabel }}</el-radio> |
|
||||
</el-radio-group> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { getDictDataList } from '@/utils' |
|
||||
export default { |
|
||||
name: 'RenRadioGroup', |
|
||||
props: { |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
value: [Number, String], |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
dictType: String |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataList: getDictDataList(this.dictType) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,7 +0,0 @@ |
|||||
import RenRegionTree from './src/ren-region-tree' |
|
||||
|
|
||||
RenRegionTree.install = function(Vue) { |
|
||||
Vue.component(RenRegionTree.name, RenRegionTree) |
|
||||
} |
|
||||
|
|
||||
export default RenRegionTree |
|
||||
@ -1,135 +0,0 @@ |
|||||
<template> |
|
||||
<div class="ren-region"> |
|
||||
<el-input v-model="showName" :placeholder="placeholder" @focus="treeDialog"> |
|
||||
<el-button slot="append" icon="el-icon-search" @click="treeDialog" /> |
|
||||
</el-input> |
|
||||
<el-input :value="value" style="display: none" /> |
|
||||
<el-dialog :visible.sync="visibleTree" width="360px" :modal="false" :title="placeholder" :close-on-click-modal="false" :close-on-press-escape="false"> |
|
||||
<el-form size="mini" :inline="true"> |
|
||||
<el-form-item :label="$t('keyword')"> |
|
||||
<el-input v-model="filterText" /> |
|
||||
</el-form-item> |
|
||||
<el-form-item> |
|
||||
<el-button type="default">{{ $t('query') }}</el-button> |
|
||||
</el-form-item> |
|
||||
</el-form> |
|
||||
<el-tree |
|
||||
ref="tree" |
|
||||
class="filter-tree" |
|
||||
:data="dataList" |
|
||||
:default-expanded-keys="expandedKeys" |
|
||||
:props="{ label: 'name', children: 'children' }" |
|
||||
:expand-on-click-node="false" |
|
||||
:filter-node-method="filterNode" |
|
||||
:highlight-current="true" |
|
||||
node-key="id" |
|
||||
/> |
|
||||
<template slot="footer"> |
|
||||
<el-button type="default" size="mini" @click="cancelHandle()">{{ $t('cancel') }}</el-button> |
|
||||
<el-button type="info" size="mini" @click="clearHandle()">{{ $t('clear') }}</el-button> |
|
||||
<el-button type="primary" size="mini" @click="commitHandle()">{{ $t('confirm') }}</el-button> |
|
||||
</template> |
|
||||
</el-dialog> |
|
||||
</div> |
|
||||
</template> |
|
||||
<style lang="scss"> |
|
||||
.ren-region { |
|
||||
.filter-tree { |
|
||||
max-height: 230px; |
|
||||
overflow: auto; |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
padding: 0px 0px 0px 20px; |
|
||||
} |
|
||||
.el-dialog__footer { |
|
||||
padding: 10px 20px 8px 20px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
<script> |
|
||||
import { treeDataTranslate } from '@/utils' |
|
||||
export default { |
|
||||
name: 'RenRegionTree', |
|
||||
props: { |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
value: [Number, String], |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
parentName: String, |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
placeholder: String |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
filterText: '', |
|
||||
visibleTree: false, |
|
||||
dataList: [], |
|
||||
showName: '', |
|
||||
expandedKeys: null, |
|
||||
defaultProps: { |
|
||||
children: 'children', |
|
||||
label: 'name' |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
watch: { |
|
||||
filterText(val) { |
|
||||
this.$refs.tree.filter(val) |
|
||||
}, |
|
||||
parentName(val) { |
|
||||
this.showName = val |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
treeDialog() { |
|
||||
this.expandedKeys = null |
|
||||
if (this.$refs.tree) { |
|
||||
this.$refs.tree.setCurrentKey(null) |
|
||||
} |
|
||||
this.visibleTree = true |
|
||||
this.getDataList(this.value) |
|
||||
}, |
|
||||
filterNode(value, data) { |
|
||||
if (!value) return true |
|
||||
return data.name.indexOf(value) !== -1 |
|
||||
}, |
|
||||
getDataList(id) { |
|
||||
return this.$http.get('/sys/region/tree').then(({ data: res }) => { |
|
||||
if (res.code !== 0) { |
|
||||
return this.$message.error(res.msg) |
|
||||
} |
|
||||
this.dataList = treeDataTranslate(res.data) |
|
||||
this.$nextTick(() => { |
|
||||
this.$refs.tree.setCurrentKey(id) |
|
||||
this.expandedKeys = [id] |
|
||||
}) |
|
||||
}).catch(() => {}) |
|
||||
}, |
|
||||
cancelHandle() { |
|
||||
this.visibleTree = false |
|
||||
this.dataList = [] |
|
||||
this.filterText = '' |
|
||||
}, |
|
||||
clearHandle() { |
|
||||
this.$emit('input', '0') |
|
||||
this.$emit('update:parentName', '') |
|
||||
this.showName = '' |
|
||||
this.visibleTree = false |
|
||||
this.dataList = [] |
|
||||
this.filterText = '' |
|
||||
}, |
|
||||
commitHandle() { |
|
||||
const node = this.$refs.tree.getCurrentNode() |
|
||||
if (!node) { |
|
||||
this.$message.error(this.$t('choose')) |
|
||||
return |
|
||||
} |
|
||||
this.$emit('input', node.id) |
|
||||
this.$emit('update:parentName', node.name) |
|
||||
this.showName = node.name |
|
||||
this.visibleTree = false |
|
||||
this.dataList = [] |
|
||||
this.filterText = '' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,7 +0,0 @@ |
|||||
import RenSelect from './src/ren-select' |
|
||||
|
|
||||
RenSelect.install = function(Vue) { |
|
||||
Vue.component(RenSelect.name, RenSelect) |
|
||||
} |
|
||||
|
|
||||
export default RenSelect |
|
||||
@ -1,24 +0,0 @@ |
|||||
<template> |
|
||||
<el-select :value="value+''" :placeholder="placeholder" clearable @input="$emit('input', $event)"> |
|
||||
<el-option v-for="data in dataList" :key="data.dictValue" :label="data.dictLabel" :value="data.dictValue">{{ data.dictLabel }}</el-option> |
|
||||
</el-select> |
|
||||
</template> |
|
||||
<script> |
|
||||
import { getDictDataList } from '@/utils' |
|
||||
export default { |
|
||||
name: 'RenSelect', |
|
||||
props: { |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
value: [Number, String], |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
dictType: String, |
|
||||
// eslint-disable-next-line vue/require-default-prop |
|
||||
placeholder: String |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dataList: getDictDataList(this.dictType) |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,404 +0,0 @@ |
|||||
<template> |
|
||||
<div class="component-container searchContent"> |
|
||||
<!-- max-height="450" --> |
|
||||
<el-table |
|
||||
ref="registerPatientsListTable" |
|
||||
:data="dataList" |
|
||||
style="width: 100%" |
|
||||
class="examine-table" |
|
||||
:show-header="conCiseShow == true ? true : false" |
|
||||
@="handleSelectionChange" |
|
||||
@select="headleSelect" |
|
||||
> |
|
||||
<el-table-column v-if="projectName == 'sampleBank'" type="selection" width="55" :selectable="selectable" /> |
|
||||
<!-- 简洁版 --> |
|
||||
<template v-if="conCiseShow == true"> |
|
||||
<!-- 姓名 --> |
|
||||
<el-table-column :label="'姓名'" header-align="center" align="center" width="120"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.register_patient.name | f_desensitize_name }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- 性别 --> |
|
||||
<el-table-column :label="'性别'" header-align="center" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.register_patient.sex | f_sex }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- 年龄 --> |
|
||||
<el-table-column :label="'年龄'" header-align="center" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.register_patient.birthday | f_getAge }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- 身份证号 --> |
|
||||
<el-table-column prop="patientIdNumber" :label="'身份证号'" header-align="center" align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.register_patient.patientIdNumber | f_desensitize_idNumber }} |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
<!-- 电话号码 备用--> |
|
||||
<!-- <el-table-column |
|
||||
prop="patientPhone" |
|
||||
:label="'电话号码'" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.register_patient.patientPhone }} |
|
||||
</template> |
|
||||
</el-table-column> --> |
|
||||
<!-- 地址 备用--> |
|
||||
<!-- <el-table-column |
|
||||
prop="patientAddress" |
|
||||
:label="'地址'" |
|
||||
header-align="center" |
|
||||
align="center" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
{{ scope.row.register_patient.patientAddress }} |
|
||||
</template> |
|
||||
</el-table-column> --> |
|
||||
<!-- 操作 --> |
|
||||
<el-table-column label="操作" header-align="center" align="center" width="150"> |
|
||||
<template slot-scope="scope"> |
|
||||
<el-button type="text" size="small" @click="showDetail(scope.row)">查看详情 |
|
||||
</el-button> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</template> |
|
||||
<!-- 标准版 --> |
|
||||
<template v-if="conCiseShow == false"> |
|
||||
<!-- 姓名 --> |
|
||||
<el-table-column header-align="center"> |
|
||||
<template slot-scope="scope"> |
|
||||
<div class="head"> |
|
||||
<div class="left"> |
|
||||
<!-- <el-checkbox :label="id">{{ "" }}</el-checkbox> --> |
|
||||
<div class="left"> |
|
||||
<span>姓名：{{ scope.row.register_patient.name }}</span> |
|
||||
<span>性别：{{ scope.row.register_patient.sex }}</span> |
|
||||
<!-- <span>年龄：{{ registerPatient.patientSexAge }}</span> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="right"> |
|
||||
<el-link type="primary" :underline="false" @click="showDetail(scope.row)">查看详情 <i |
|
||||
class="el-icon-arrow-right el-icon--right" |
|
||||
/></el-link> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="searchContent-text" v-html="scope.row.allHighlight" /> |
|
||||
<div class="exam"> |
|
||||
<p v-for="(item, index) in scope.row.pacs_register_examine_item" :key="index"> |
|
||||
<span>{{ item.examineItem }}</span> |
|
||||
<span>{{ item.count + "次" }}</span> |
|
||||
</p> |
|
||||
</div> |
|
||||
|
|
||||
<el-row :gutter="20"> |
|
||||
<el-col :span="12"> |
|
||||
<echarts-shili :chart-data="scope.row.shili" :id-name="'shili' + scope.$index" desc="视力" /> |
|
||||
</el-col> |
|
||||
<el-col :span="12"> |
|
||||
<echarts-yanya :chart-data="scope.row.yanya" :id-name="'yanya' + scope.$index" desc="眼压" /> |
|
||||
</el-col> |
|
||||
</el-row> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</template> |
|
||||
</el-table> |
|
||||
<!-- 底部全选反选 --> |
|
||||
<checked-footer |
|
||||
v-if="projectName == 'sampleBank'" |
|
||||
ref="checkfooter" |
|
||||
table-ref="registerPatientsListTable" |
|
||||
:current-table-list="currentTableList" |
|
||||
:data-list="dataList" |
|
||||
> |
|
||||
<div class="batch_button"> |
|
||||
<el-button type="primary" size="small" @click="IntoSubjectsClick">引入受试者</el-button> |
|
||||
</div> |
|
||||
</checked-footer> |
|
||||
<!-- 详情页 --> |
|
||||
<el-dialog title="360视图" class="detail-view" :visible.sync="dialogVisible" :fullscreen="true"> |
|
||||
<detail-view :id="detailId" ref="viewRef" :patient-id-number="patientIdNumber" /> |
|
||||
</el-dialog> |
|
||||
<!-- 补全身份证号 --> |
|
||||
<el-dialog title="收货地址" :visible.sync="dialogPatientIDVisible" @closed="closePatientId"> |
|
||||
<span>身份证:</span> |
|
||||
<el-input v-model="patientIdNumber" placeholder="请输入内容" clearable /> |
|
||||
<div slot="footer" class="dialog-footer"> |
|
||||
<el-button @click="dialogPatientIDVisible=false">取 消</el-button> |
|
||||
<el-button type="primary" @click="surePatientIdClick">确 定</el-button> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
|
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
import echartsShili from '@/components/echarts/shili' |
|
||||
import echartsYanya from '@/components/echarts/yanya' |
|
||||
import checkedFooter from '@/components/checked-footer' |
|
||||
import detailView from '@/components/360View/index1' |
|
||||
import checked from '@/mixins/checked' |
|
||||
import { confirm } from '@/utils/confirm' |
|
||||
export default { |
|
||||
components: { echartsShili, echartsYanya, detailView, checkedFooter }, |
|
||||
mixins: [checked], |
|
||||
inject: ['refresh'], |
|
||||
props: { |
|
||||
id: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
htmlText: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
projectName: { |
|
||||
type: String, |
|
||||
default: '' |
|
||||
}, |
|
||||
registerPatient: { |
|
||||
type: Object, |
|
||||
default: () => { |
|
||||
return {} |
|
||||
} |
|
||||
}, |
|
||||
dataList: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
visionData: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
iopData: { |
|
||||
type: Array, |
|
||||
default: () => [] |
|
||||
}, |
|
||||
conCiseShow: { |
|
||||
type: Boolean, |
|
||||
default: true |
|
||||
} |
|
||||
}, |
|
||||
data() { |
|
||||
return { |
|
||||
dialogVisible: false, |
|
||||
dialogPatientIDVisible: false, |
|
||||
detailId: '', |
|
||||
patientIdNumber: '', |
|
||||
checked: false, |
|
||||
// cheackAllFooter: false, |
|
||||
currentTableList: [], |
|
||||
projectId: '', |
|
||||
noPatientIDList: {}, |
|
||||
currentSelectionRow: {}, |
|
||||
flag: 0 |
|
||||
} |
|
||||
}, |
|
||||
created() { |
|
||||
this.projectId = window.SITE_CONFIG['projectId'] |
|
||||
}, |
|
||||
methods: { |
|
||||
// 查看详情 |
|
||||
showDetail(scope) { |
|
||||
this.patientIdNumber = scope.register_patient.patientIdNumber |
|
||||
this.detailId = scope.id |
|
||||
this.dialogVisible = true |
|
||||
this.$nextTick(() => { |
|
||||
// 根据id获取患者信息--中间上侧患者信息 |
|
||||
this.$refs.viewRef.getPatientData() |
|
||||
// 获取时间轴数据--左侧时间轴 |
|
||||
this.$refs.viewRef.getTimeAxisData() |
|
||||
// 获取视力和眼压图标的值 |
|
||||
this.$refs.viewRef.getShiLiAndYanYaData() |
|
||||
// 获取关键指标--右侧获取筛选的具体值 |
|
||||
this.$refs.viewRef.getKPI() |
|
||||
}) |
|
||||
}, |
|
||||
// 当选择项发生变化时会触发该事件 |
|
||||
handleSelectionChange(val) { |
|
||||
if (val.length === this.dataList.length) { |
|
||||
this.$refs.checkfooter.cheackAllFooter = true |
|
||||
} else { |
|
||||
this.$refs.checkfooter.cheackAllFooter = false |
|
||||
} |
|
||||
this.currentTableList = val |
|
||||
}, |
|
||||
// 当用户手动勾选数据行的 Checkbox 时触发的事件 |
|
||||
headleSelect(val) { |
|
||||
// 330104195404061636 |
|
||||
this.flag = 0 |
|
||||
this.currentSelectionRow = val[0] |
|
||||
if (val.length > 0 && !val[0].register_patient.patientIdNumber) { |
|
||||
this.noPatientIDList = val[0].register_patient |
|
||||
this.dialogPatientIDVisible = true |
|
||||
} |
|
||||
}, |
|
||||
// 确定添加身份证号 |
|
||||
async surePatientIdClick() { |
|
||||
const { data: res } = await this.$http.post('/project/patient/completeIdNumber', { |
|
||||
birthday: this.$options.filters['dateFilterTwo'](this.noPatientIDList.birthday), |
|
||||
hospitalId: this.noPatientIDList.hospitalId, |
|
||||
name: this.noPatientIDList.name, |
|
||||
patientId: this.noPatientIDList.id, |
|
||||
patientIdNumber: this.patientIdNumber, |
|
||||
sex: this.noPatientIDList.sex |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.$message({ |
|
||||
type: 'success', |
|
||||
message: '身份证号添加成功' |
|
||||
}) |
|
||||
this.flag = 1 |
|
||||
this.dialogPatientIDVisible = false |
|
||||
} else { |
|
||||
this.flag = 0 |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}, |
|
||||
// 关闭添加身份证号弹框 |
|
||||
closePatientId() { |
|
||||
this.dialogPatientIDVisible = false |
|
||||
this.flag === 0 ? this.$refs.registerPatientsListTable.toggleRowSelection(this.currentSelectionRow, false) : '' |
|
||||
}, |
|
||||
// 引入受试者 |
|
||||
IntoSubjectsClick() { |
|
||||
confirm('确定要引入受试者吗?').then(async() => { |
|
||||
const patientInfoArr = [] |
|
||||
let patientInfoObj = {} |
|
||||
this.currentTableList.forEach((item) => { |
|
||||
patientInfoObj = { |
|
||||
hospitalCode: item.register_patient.hospitalId, |
|
||||
patientBirthday: item.register_patient.birthday, |
|
||||
patientId: item.register_patient.id, |
|
||||
patientIdNumber: item.register_patient.patientIdNumber, |
|
||||
patientName: item.register_patient.name, |
|
||||
patientSex: item.register_patient.sex, |
|
||||
projectId: this.projectId |
|
||||
} |
|
||||
patientInfoArr.push(patientInfoObj) |
|
||||
}) |
|
||||
const { data: res } = await this.$http({ |
|
||||
method: 'post', |
|
||||
url: '/project/patient', |
|
||||
data: patientInfoArr |
|
||||
}) |
|
||||
if (res.code === 0) { |
|
||||
this.$message({ |
|
||||
type: 'success', |
|
||||
message: '引入成功!' |
|
||||
}) |
|
||||
this.currentTableList.forEach(item => { |
|
||||
this.dataList.forEach(iten => { |
|
||||
if (item.id === iten.id) { |
|
||||
item.existInProject = 1 |
|
||||
} |
|
||||
}) |
|
||||
}) |
|
||||
this.$refs.registerPatientsListTable.clearSelection() |
|
||||
} else { |
|
||||
this.$message.error(res.msg) |
|
||||
} |
|
||||
}) |
|
||||
}, |
|
||||
// Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 |
|
||||
selectable(row, index) { |
|
||||
if (row.existInProject === 1) { |
|
||||
return false |
|
||||
} else { |
|
||||
return true |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.searchContent { |
|
||||
width: 100%; |
|
||||
padding-bottom: 16px; |
|
||||
background-color: #fff; |
|
||||
margin-bottom: 16px; |
|
||||
.head { |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
.el-checkbox { |
|
||||
margin-right: 16px; |
|
||||
} |
|
||||
.left { |
|
||||
display: flex; |
|
||||
span { |
|
||||
font-size: 14px; |
|
||||
padding-right: 55px; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
.searchContent-text { |
|
||||
font-size: 14px; |
|
||||
margin: 16px 0; |
|
||||
} |
|
||||
.exam { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
p { |
|
||||
display: flex; |
|
||||
flex-wrap: nowrap; |
|
||||
height: 32px; |
|
||||
line-height: 32px; |
|
||||
width: 18%; |
|
||||
background-color: #eee; |
|
||||
padding: 0 10px; |
|
||||
margin: 6px; |
|
||||
span { |
|
||||
display: block; |
|
||||
flex: 1; |
|
||||
overflow: hidden; |
|
||||
white-space: nowrap; |
|
||||
text-overflow: ellipsis; |
|
||||
} |
|
||||
span:nth-child(2) { |
|
||||
padding-left: 14px; |
|
||||
color: #0072f9; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
a.el-link.el-link--primary:hover { |
|
||||
text-decoration: none; |
|
||||
} |
|
||||
</style> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.searchContent .detail-view { |
|
||||
.el-dialog { |
|
||||
background: #000; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
|
|
||||
.el-dialog__header { |
|
||||
padding: 10px 20px 10px; |
|
||||
|
|
||||
.el-dialog__title { |
|
||||
color: #fff; |
|
||||
padding: 10px; |
|
||||
} |
|
||||
|
|
||||
.el-dialog__headerbtn { |
|
||||
top: 5px; |
|
||||
font-size: 30px; |
|
||||
} |
|
||||
.el-dialog__headerbtn .el-dialog__close { |
|
||||
color: #fff; |
|
||||
} |
|
||||
} |
|
||||
.el-dialog__body { |
|
||||
height: calc(100vh - 60px); |
|
||||
padding: 0 10px; |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue