Skip to content

P
patzn-cloud-web-back-soil
Commit 2e1456e1 by lichengming
Options

修改了首页

parent 069fff64
Showing with 354 additions and 1 deletions
pages/workbench/CustomerContract.vue 0 → 100644
<template>
<div>
<Card style="width:100%;">
<div class="config_meta">
<p class="fl" style="margin-bottom: 10px;">客户委托分析</p>
<div class="fr">
<Tooltip content="刷新" placement="left-start">
<Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
</Tooltip>
</div>
<div class="clear"></div>
</div>
<Row>
<Col span="24" style="margin-bottom: 10px">
制单日期：
<Date-picker @on-change="_ctimeChange" v-model="dateList" type="daterange" split-panels
style="width:200px" placeholder="请选择日期"></Date-picker>
</Col>
<Col span="24">
<div v-show="showStatistic" style="width:100%">
<!--饼图-->
<IEcharts :option="option" :style="{width}" @click="_detail" style="height: 242px"></IEcharts>
</div>
<div v-show="!showStatistic" class="no-statistic-bg"></div>
</Col>
</Row>
</Card>
<!--委托详情-->
</div>
</template>
<script>
export default {
components: {},
data() {
return {
width: '',
option: {
title: {
x: 'center',
textStyle: {
fontSize: 18,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: function(a) {
return (
a.name +
'</br>委托量: ' +
a.data.total +
'<br>占比: ' +
a.percent +
'%'
)
}
},
legend: {
orient: 'horizontal',
y: 'bottom',
data: ['已开完发票']
},
color: this.$echartColor,
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
center: ['50%', '50%'],
data: [{ value: 335, name: '已开完发票' }],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
}
}
]
},
tempData: {
signDateBegin: '',
signDateEnd: ''
},
dateList: [],
showStatistic: true
}
},
mounted() {
this.width = (document.documentElement.clientWidth - 300) / 2 + 'px'
const newDate = new Date()
const year = newDate.getFullYear()
let month = newDate.getMonth() + 1
if (month < 10) {
month = '0' + month
}
const firstdate = year + '-' + month + '-01'
this.dateList = [new Date(firstdate), new Date()]
this.tempData.signDateBegin = firstdate
this.tempData.signDateEnd = this.$dateformat(newDate, 'yyyy-mm-dd')
// this._getPie()
},
methods: {
_request() {
this._getPie()
},
// 日期
_ctimeChange(data) {
this.tempData.signDateBegin = data[0]
this.tempData.signDateEnd = data[1]
this._getPie()
},
_getPie() {
this.showStatistic = false
const testerList = []
const seriesList = []
let total = 0
this.$store
.dispatch(
'FoodContract/contractAnalysis',
this.$serializeFormSearch(this.tempData)
)
.then(() => {
const result = this.$store.state.FoodContract.list
if (result !== undefined) {
for (let i = 0; i < result.length; i++) {
testerList.push(
result[i].billType === undefined ? '' : result[i].billType
)
total = total + result[i].total
seriesList.push({
value: result[i].total,
name:
result[i].billType === undefined ? '' : result[i].billType,
total: result[i].total
})
}
if (testerList.length === 0) {
this.showStatistic = false
} else {
this.showStatistic = true
}
}
this.option.title.text = ' 委托量总计(份): ' + total
this.option.legend.data = testerList
this.option.series[0].data = seriesList
})
},
// 查看委托详情
_detail(data) {
const temp = {
signDateBegin: this.tempData.signDateBegin,
signDateEnd: this.tempData.signDateEnd
}
this.$refs.detectTypeDetail._open(data.name, temp)
}
}
}
</script>
pages/workbench/GroupItem.vue 0 → 100644
<template>
<div>
<Card style="width:100%;">
<div class="config_meta">
<p style="margin-bottom: 10px;">科室检测项目统计</p>
</div>
<Row>
<!--查询条件-->
<Col span="24">
<Form id="search-form" :label-width="70" inline onsubmit="return false">
<Form-item label="检测科室:">
<Select v-model="formObj.groupId" name="groupId" style="width:150px" placeholder="请选择检测科室">
<Option v-for="item in groupData" :value="item.id" :key="item.id">{{item.name}}</Option>
</Select>
</Form-item>
<Form-item label="日期:">
<DatePicker v-model="formObj.date" :editable="false" @on-change="_dateChange" type="year"
style="width:90px"></DatePicker>
</Form-item>
<Form-item class="search-btn">
<Button @click="_search" type="primary">搜索</Button>
</Form-item>
</Form>
</Col>
<!--内容-->
<Col span="24" style="margin-bottom: -11px">
<GroupItemBar ref="barModal"></GroupItemBar>
</Col>
</Row>
</Card>
</div>
</template>
<script>
import GroupItemBar from './GroupItemBar'
export default {
components: {
GroupItemBar
},
data() {
return {
formObj: {
date: new Date(),
groupId: ''
},
groupData: []
}
},
mounted() {
// this._getEquipList()
},
methods: {
// 检测科室
_getEquipList() {
this.$store.dispatch('LmsUserGroup/list').then(() => {
this.groupData = this.$store.state.LmsUserGroup.list
this.formObj.groupId = this.groupData[0].id
this.formObj.groupName = this.groupData[0].name
this.$nextTick(function() {
this.$refs.barModal._openBar(this.formObj)
})
})
},
_dateChange(data) {
this.$refs.barModal._openBar(this.formObj)
},
_search() {
this.$refs.barModal._openBar(this.formObj)
}
}
}
</script>
pages/workbench/GroupItemBar.vue 0 → 100644
<template>
<!--<div class="chartCont">-->
<div style="width:90%">
<IEcharts :option="option" style="width:100%;height: 238px"></IEcharts>
</div>
<!--</div>-->
</template>
<script>
export default {
components: {},
data() {
return {
option: {
color: this.$echartColor,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
x: 130
},
legend: {
data: ['检测量']
},
xAxis: [
{
type: 'category',
data: [],
axisPointer: {
type: ''
},
axisLine: {
lineStyle: {
color: 'gray'
}
},
splitLine: { show: false }
}
],
yAxis: [
{
type: 'value',
name: '检测量',
min: 0,
axisLabel: {
formatter: '{value}'
},
axisLine: {
lineStyle: {
color: 'gray'
}
},
splitLine: { show: false }
}
],
series: [
{
name: '检测量',
type: 'bar',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
}
]
},
year: ''
}
},
methods: {
_openBar(obj) {
this.year = obj.date.getFullYear()
this.groupId = obj.groupId
this.option.xAxis[0].data = []
for (let i = 1; i < 13; i++) {
if (i < 10) {
this.option.xAxis[0].data.push(this.year + '-0' + i)
} else {
this.option.xAxis[0].data.push(this.year + '-' + i)
}
}
this.$store
.dispatch('FoodContract/groupYearNum', {
year: this.year,
groupId: this.groupId
})
.then(() => {
const result = this.$store.state.FoodContract.page
this.option.series[0].data = []
for (let j = 0; j < result.length; j++) {
for (let k = 0; k < this.option.xAxis[0].data.length; k++) {
if (result[j].testMonth === this.option.xAxis[0].data[k]) {
this.option.series[0].data[k] = result[j].testCount
}
}
}
})
}
}
}
</script>
pages/workbench/workbench.vue
......@@ -55,6 +55,12 @@
<Col span="12" style="margin-bottom: 10px">
<YearOverItem></YearOverItem>
</Col>
<Col span="12" style="margin-bottom: 10px">
<GroupItem></GroupItem>
</Col>
<Col span="12" style="margin-bottom: 10px">
<CustomerContract></CustomerContract>
</Col>
</Row>
</div>
</div>
......@@ -75,6 +81,8 @@ import DetectTypeNum from './DetectTypeNum'
import ContractEndNum from './ContractEndNum'
import YearTestItem from './YearTestItem'
import YearOverItem from './YearOverItem'
import GroupItem from './GroupItem'
import CustomerContract from './CustomerContract'
export default {
name: 'Workbench',
components: {
......@@ -90,7 +98,9 @@ export default {
DetectTypeNum,
ContractEndNum,
YearTestItem,
YearOverItem
YearOverItem,
GroupItem,
CustomerContract
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment