Skip to content

P
patzn-cloud-web-back-soil
Commit 069fff64 by lichengming
Options

修改了首页

parent 0a8d062e
Showing with 623 additions and 2 deletions
pages/workbench/ContractEndNum.vue 0 → 100644
<template>
<div>
<Card style="width:100%;">
<div class="config_meta">
<p class="fl">委托完成额占比</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">
制单日期：
<DatePicker v-model="beginMonth" :editable="false" @on-change="_request" type="month"
style="width:90px"></DatePicker>
<label class="line-color">——</label>
<DatePicker v-model="endMonth" :editable="false" @on-change="_request" type="month"
style="width:90px"></DatePicker>
</Col>
<Col span="24">
<div v-show="showStatistic" style="width:100%">
<IEcharts :option="option" @ready="_onReady" :style="{width}"
style="height:238px"></IEcharts>
</div>
<div v-show="!showStatistic" class="no-statistic-bg"></div>
</Col>
</Row>
</Card>
</div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full.js'
export default {
components: {},
data() {
return {
width: '',
beginMonth: new Date(),
endMonth: new Date(),
option: {
color: this.$echartColor,
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 10,
data: ['未完成委托额', '已完成委托额']
},
series: [
{
name: '委托完成额',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '未完成委托额' },
{ value: 310, name: '已完成委托额' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
showStatistic: true
}
},
mounted() {
this.width = (document.documentElement.clientWidth - 280) / 2 + 'px'
// this._request()
},
methods: {
_request() {
this.showStatistic = false
const data = {}
data.beginMonth = this.$dateformat(this.beginMonth, 'yyyy-mm')
data.endMonth = this.$dateformat(this.endMonth, 'yyyy-mm')
this.$store.dispatch('FoodContract/contractEndNum', data).then(() => {
const result = this.$store.state.FoodContract.model
const series = []
if (result !== undefined) {
series.push({ value: result.contractAmount, name: '已完成委托额' })
series.push({ value: result.noContractAmount, name: '未完成委托额' })
}
this.option.series[0].data = series
if (series.length === 0) {
this.showStatistic = false
} else {
this.showStatistic = true
}
})
},
_onReady() {
// this._request();
}
}
}
</script>
pages/workbench/DetectTypeNum.vue 0 → 100644
<template>
<div>
<Card style="width:100%;">
<div class="config_meta">
<p class="fl">检测类型委托统计</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: 238px"></IEcharts>
</div>
<div v-show="!showStatistic" style="height: 238px;text-align: center;" class="no-statistic-bg"><p style="position: relative;top: 100px;">暂无数据</p></div>
</Col>
</Row>
</Card>
<!--委托详情-->
<!-- <DetectTypeContractDetail ref="detectTypeDetail"></DetectTypeContractDetail>-->
</div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full.js'
// import DetectTypeContractDetail from '../../lims/food-test/envAnalysisManage/detect-type/ContractDetail'
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: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
}
}
]
},
tempData: {
ctimeBegin: '',
ctimeEnd: ''
},
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.ctimeBegin = firstdate
this.tempData.ctimeEnd = this.$dateformat(newDate, 'yyyy-mm-dd')
// this._getPie()
},
methods: {
_request() {
this._getPie()
},
// 日期
_ctimeChange(data) {
this.tempData.ctimeBegin = data[0]
this.tempData.ctimeEnd = data[1]
this._getPie()
},
_getPie() {
this.showStatistic = false
const detectList = []
const seriesList = []
let total = 0
this.$store
.dispatch(
'StatisticContract/detectTypeList',
this.$serializeFormSearch(this.tempData)
)
.then(() => {
const result = this.$store.state.StatisticContract.list
for (let i = 0; i < result.length; i++) {
detectList.push(
result[i].detectType === undefined ? '' : result[i].detectType
)
total = total + result[i].contractAmount
seriesList.push({
value: result[i].contractAmount,
name:
result[i].detectType === undefined ? '' : result[i].detectType,
total: result[i].contractAmount
})
if (detectList.length === 0) {
this.showStatistic = false
} else {
this.showStatistic = true
}
}
this.option.title.text = ' 委托总额(元): ' + total
this.option.legend.data = detectList
this.option.series[0].data = seriesList
})
},
// 查看委托详情
_detail(data) {
const temp = {
queryDateBegin: this.tempData.ctimeBegin,
queryDateEnd: this.tempData.ctimeEnd
}
this.$refs.detectTypeDetail._open(data.name, temp)
}
}
}
</script>
pages/workbench/UnfinishedItem.vue
......@@ -33,7 +33,7 @@
</div>
</Card>
<!--未完成检测项目列表-->
<FoodUnfinishedItem ref="unfinishedDetail"></FoodUnfinishedItem>
<!-- <FoodUnfinishedItem ref="unfinishedDetail"></FoodUnfinishedItem>-->
</div>
</template>
......
pages/workbench/YearOverItem.vue 0 → 100644
<template>
<div>
<Card style="width:100%;">
<div class="config_meta">
<p class="fl">年度超标项目统计</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">
日期：
<DatePicker v-model="date" :editable="false" @on-change="_dateChange" type="year"
style="width:90px"></DatePicker>
</Col>
<Col span="24">
<div style="width:100%">
<!--柱状图-->
<IEcharts :option="option" :style="{width}" @click="_detail" style="height: 238px"></IEcharts>
</div>
</Col>
</Row>
</Card>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
width: '',
date: new Date(),
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 }
},
{
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]
},
{
name: '超标率',
type: 'line',
yAxisIndex: 1,
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
}
]
}
}
},
mounted() {
this.width = (document.documentElement.clientWidth - 300) / 2 + 'px'
this._dateChange(this.$dateformat(new Date(), 'yyyy'))
},
methods: {
_request() {
this._openBar(this.year)
},
// 改变年份
_dateChange(data) {
// this._openBar(data)
},
_openBar(data) {
this.year = data
this.option.xAxis[0].data = []
for (let i = 1; i < 13; i++) {
if (i < 10) {
this.option.xAxis[0].data.push(data + '-0' + i)
} else {
this.option.xAxis[0].data.push(data + '-' + i)
}
}
this.$store
.dispatch('FoodContract/pageYearOverItem', { year: data })
.then(() => {
const result = this.$store.state.FoodContract.list
this.option.series[0].data = []
this.option.series[1].data = []
for (let j = 0; j < result.length; j++) {
for (let k = 0; k < this.option.xAxis[0].data.length; k++) {
if (result[j].testDateMonth === this.option.xAxis[0].data[k]) {
this.option.series[0].data[k] = result[j].total
this.option.series[1].data[k] = result[j].unQualifiedPercent
}
}
}
})
}
}
}
</script>
pages/workbench/YearTestItem.vue 0 → 100644
<template>
<div>
<Card style="width:100%;">
<div class="config_meta">
<p class="fl">年度检测量统计</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">
日期：
<DatePicker v-model="date" :editable="false" @on-change="_dateChange" type="year"
style="width:90px"></DatePicker>
</Col>
<Col span="24">
<div style="width:100%">
<!--柱状图-->
<IEcharts :option="option" :style="{width}" style="height: 238px"></IEcharts>
</div>
</Col>
</Row>
</Card>
</div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full.js'
export default {
components: {},
data() {
return {
width: '',
date: new Date(),
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: []
}
],
yAxis: [
{
type: 'value',
name: '样品量',
splitLine: { show: false }
},
{
type: 'value',
name: '检测项目量',
splitLine: { show: false }
}
],
series: [
{
name: '样品量',
type: 'bar',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
name: '项目未超标量',
type: 'bar',
yAxisIndex: 1,
stack: '检测项目量',
data: [6, 7, 8, 9, 10, 11, 12, 13, 14]
},
{
name: '项目超标量',
type: 'bar',
yAxisIndex: 1,
stack: '检测项目量',
data: [11, 12, 13, 14, 15, 16, 17, 18, 19]
}
]
},
// 临时存储x轴数据
tempXAxis: []
}
},
mounted() {
this.width = (document.documentElement.clientWidth - 300) / 2 + 'px'
this._dateChange(this.$dateformat(new Date(), 'yyyy'))
},
methods: {
_request() {
// this._openBar(this.year)
},
// 改变年份
_dateChange(data) {
// this._openBar(data)
},
_openBar(data) {
this.year = data
this.option.xAxis[0].data = []
for (let i = 1; i < 13; i++) {
if (i < 10) {
this.option.xAxis[0].data.push(data + '-0' + i)
} else {
this.option.xAxis[0].data.push(data + '-' + i)
}
}
this.$store
.dispatch('FoodContract/pageYearItem', { year: data })
.then(() => {
const result = this.$store.state.FoodContract.model
const month = [
'jan',
'feb',
'mar',
'apr',
'may',
'jun',
'jul',
'aug',
'sep',
'oct',
'nov',
'dece'
]
const sampleCount = result.sampleCount
const itemCountNotOver = result.itemCountNotOver
const itemCountOver = result.itemCountOver
const sampleCountData = []
const itemCountOverData = []
const itemCountNotOverData = []
for (let i = 0; i < month.length; i++) {
const m = month[i]
sampleCountData.push(sampleCount[m])
itemCountNotOverData.push(itemCountNotOver[m])
itemCountOverData.push(itemCountOver[m])
}
this.option.series[0].data = sampleCountData
this.option.series[1].data = itemCountNotOverData
this.option.series[2].data = itemCountOverData
})
}
}
}
</script>
pages/workbench/workbench.vue
......@@ -43,6 +43,18 @@
<Col span="12" style="margin-bottom: 10px">
<YearContractNum></YearContractNum>
</Col>
<Col span="12" style="margin-bottom: 10px">
<DetectTypeNum></DetectTypeNum>
</Col>
<Col span="12" style="margin-bottom: 10px">
<ContractEndNum></ContractEndNum>
</Col>
<Col span="12" style="margin-bottom: 10px">
<YearTestItem></YearTestItem>
</Col>
<Col span="12" style="margin-bottom: 10px">
<YearOverItem></YearOverItem>
</Col>
</Row>
</div>
</div>
......@@ -59,6 +71,10 @@ import taskFlow from './TaskFlow'
import UnfinishedContract from './UnfinishedContract'
import UnfinishedItem from './UnfinishedItem'
import YearContractNum from './YearContractNum'
import DetectTypeNum from './DetectTypeNum'
import ContractEndNum from './ContractEndNum'
import YearTestItem from './YearTestItem'
import YearOverItem from './YearOverItem'
export default {
name: 'Workbench',
components: {
......@@ -70,7 +86,11 @@ export default {
// taskCalendar
UnfinishedContract,
UnfinishedItem,
YearContractNum
YearContractNum,
DetectTypeNum,
ContractEndNum,
YearTestItem,
YearOverItem
}
}
</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