Skip to content

P
patzn-cloud-web-back-soil
Commit 6536f21f by lichengming
Options

添加统计查询页面

parent 3441b0ae
Showing with 1942 additions and 0 deletions
api/homePage.js 0 → 100644
function test() {
console.log(123)
}
function waveImg(dataPersonal) {
const xData = []
const yData = []
const sevenList = dataPersonal
for (let i = 0; i < sevenList.length; i++) {
const obj = sevenList[i]
xData.push(obj.dayIns)
yData.push(obj.insNum)
}
const echarts = require('echarts')
const myChart = echarts.init(document.getElementById('waveImg'))
myChart.setOption({
title: {
text: ''
},
tooltip: {},
xAxis: {
data: xData,
boundaryGap: false,
show: false,
splitLine: {
show: false
}
},
yAxis: {
show: false,
splitLine: {
show: false
}
},
series: [
{
name: '',
type: 'line',
smooth: true,
areaStyle: {},
itemStyle: {
normal: {
color: 'lightblue', // 圈圈的颜色
lineStyle: {
color: 'lightblue' // 线的颜色
}
}
},
data: yData
}
],
grid: {
top: 30,
// left: 0,
height: 60
}
})
// setTimeout(() => {
// myChart.resize()
// }, 1000)
}
function histogram(listSevenReceive) {
const xData = []
const yData = []
const sevenList = listSevenReceive
for (let i = 0; i < sevenList.length; i++) {
const obj = sevenList[i]
xData.push(obj.dayIns)
yData.push(obj.insNum)
}
console.log(xData)
console.log(yData)
const echarts = require('echarts')
const myChart = echarts.init(document.getElementById('histogram'))
myChart.setOption({
title: {
text: ''
},
tooltip: {},
xAxis: {
data: xData,
type: 'category',
boundaryGap: true,
show: false,
splitLine: {
show: false
}
},
yAxis: {
show: false,
splitLine: {
show: false
}
},
series: [
{
name: '',
type: 'bar',
smooth: true,
areaStyle: {},
itemStyle: {
normal: {
color: 'lightblue', // 圈圈的颜色
lineStyle: {
color: 'lightblue' // 线的颜色
}
}
},
data: yData
}
],
grid: {
top: 30,
// left: 0,
height: 60
}
})
}
function saleImg(itemNotOk) {
const xData = []
const yData = []
const sevenList = itemNotOk
for (let i = 0; i < sevenList.length; i++) {
const obj = sevenList[i]
xData.push(obj.name)
yData.push(obj.number)
}
const echarts = require('echarts')
const myChart = echarts.init(document.getElementById('saleImg'))
myChart.setOption({
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: xData,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '不合格数量',
type: 'bar',
barWidth: '60%',
data: yData
}
]
})
}
function salesTrendImg(sampleList) {
const xData = []
const yData = []
const sevenList = sampleList
for (let i = 0; i < sevenList.length; i++) {
const obj = sevenList[i]
xData.push(obj.name)
yData.push(obj.number)
}
const echarts = require('echarts')
const myChart = echarts.init(document.getElementById('salesTrendImg'))
myChart.setOption({
color: ['lightblue'],
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
top: 10,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: xData,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '',
type: 'bar',
barWidth: '60%',
data: yData
}
]
})
}
function visitImg(data) {
const xData = []
const yData = []
const zData = []
const sevenList = data.sampleRank
const sevenListItem = data.itemRank
for (let i = 0; i < sevenList.length; i++) {
const obj = sevenList[i]
xData.push(obj.name)
yData.push(obj.number)
}
for (let i = 0; i < sevenListItem.length; i++) {
const obj = sevenListItem[i]
zData.push(obj.number)
}
const echarts = require('echarts')
const myChart = echarts.init(document.getElementById('visitImg'))
myChart.setOption({
title: {
// text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['报检量', '项目量']
},
grid: {
top: 20,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
// height: 320
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xData
},
yAxis: {
type: 'value'
},
series: [
{
name: '报检量',
type: 'line',
data: yData
},
{
name: '项目量',
type: 'line',
data: zData
}
]
})
console.log('js加载完成')
}
export { test, waveImg, histogram, saleImg, salesTrendImg, visitImg }
api/index.js
......@@ -30,3 +30,4 @@ export { default as soilAptitude } from './soil/soil-aptitude'
export { default as soilEntrust } from './soil/soil-entrust'
export { default as soilSample } from './soil/soil-sample'
export { default as soilTest } from './soil/soil-test'
export { default as soilStatistics } from './soil/soil-statistics'
api/soil/soil-statistics.js 0 → 100644
/**
* 工作台
*/
import http from '../http'
// import { https } from '../https'
export default {
// 检测依据管理
standardPage: data =>
http.post('soil/v1/standard/page', data).then(res => res),
standardGetById: data =>
http.get('soil/v1/standard/' + data).then(res => res),
standardSave: data => http.post('soil/v1/standard/', data).then(res => res),
standardEdit: data =>
http.put('soil/v1/standard/' + data.id, data.obj).then(res => res),
standardDeleteById: data =>
http.delete('soil/v1/standard/?ids=' + data).then(res => res),
// 试验项目
// page
page: data => http.post('soil/v1/aptitude_exp/page', data).then(res => res),
getById: data => http.get('soil/v1/aptitude_exp/' + data).then(res => res),
deleteById: data =>
http.delete('soil/v1/aptitude_exp/?ids=' + data).then(res => res),
// 保存
save: data => http.post('soil/v1/aptitude_exp/', data).then(res => res),
edit: data =>
http.put('soil/v1/aptitude_exp/' + data.id, data.obj).then(res => res),
// 指标页面
expItemPage: data =>
http.post('soil/v1/exp_item/page', data).then(res => res),
expItemDeleteByIds: data =>
http.delete('soil/v1/exp_item/?ids=' + data).then(res => res),
expItemSave: data => http.post('soil/v1/exp_item/', data).then(res => res),
expItemEdit: data =>
http.put('soil/v1/exp_item/' + data.id, data.obj).then(res => res),
expItemGetById: data => http.get('soil/v1/exp_item/' + data).then(res => res)
}
pages/soil-statistics/annual-entrust/MeterAnnualEntrust.vue 0 → 100644
<template>
<div>
<div class="layout-content-padding">
<div class="layout-content-main">
<Row style="margin-top: 10px;">
<!--查询条件-->
<Col span="24">
<div class="fl">
<Form id="search-form" :label-width="70" inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item label="委托日期:">
<DatePicker
v-model="entrustDate"
:editable="false"
:clearable="false"
@on-change="_dateChange"
type="year"
style="width:90px"
></DatePicker>
</Form-item>
</Form>
</div>
<div class="clear"></div>
</Col>
<!--内容-->
<Col span="24">
<Row :gutter="16">
<Col span="16" style="margin-bottom: 10px">
<!--bar-->
<YearContractBar ref="barModal"></YearContractBar>
</Col>
<Col span="8">
<!--bar-->
<YearContractPie ref="pieModal"></YearContractPie>
</Col>
<Col span="24">
<!--table-->
<YearContractTable ref="tableModal"></YearContractTable>
</Col>
</Row>
</Col>
</Row>
</div>
</div>
</div>
</template>
<script>
// eslint-disable-next-line import/named
import { soilStatistics } from '../../../api'
import YearContractTable from './YearContractTable'
import YearContractBar from './YearContractBar'
import YearContractPie from './YearContractPie'
export default {
components: {
YearContractTable,
YearContractBar,
YearContractPie
},
data() {
return {
entrustDate: new Date(),
formObj: {}
}
},
mounted() {
// this._getData(this.entrustDate.getFullYear())
},
methods: {
_getData: async function(data) {
this.formObj.entrustDate = data
const result = await soilStatistics.pageAnnualEntrustStatistics(
this.formObj
)
console.log('result', result)
if (result) {
this._open(result)
}
},
_open(data) {
this.$refs.tableModal._openTable(this.entrustDate.getFullYear(), data)
this.$refs.barModal._openBar(this.entrustDate.getFullYear(), data)
this.$refs.pieModal._openPie(this.entrustDate.getFullYear(), data)
},
_dateChange(data) {
this._getData(data)
},
_export() {
this.$refs.tableModal._exportSampleForm()
}
}
}
</script>
<style>
.border-chart-color {
border: 1px solid #e9eaec;
}
.chartTitle {
height: 32px;
line-height: 32px;
background: #f8f8f9;
padding-left: 15px;
border-bottom: 1px solid #e9eaec;
}
.chartTitle label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
</style>
pages/soil-statistics/annual-entrust/YearContractBar.vue 0 → 100644
<template>
<div class="border-chart-color" style="border: 1px solid #e9eaec">
<div class="chartTitle">
<label>{{ year }}年度委托量统计</label>
</div>
<div :style="heightObj" class="chartCont">
<div style="width:85%">
<IEcharts :option="option" :style="optionObj"></IEcharts>
</div>
</div>
</div>
</template>
<script>
// import IEcharts from '../../../../../../node_modules/vue-echarts-v3/src/full.js';
export default {
// components: {IEcharts},
data() {
return {
name: 'A',
heightObj: {
height: '300px'
},
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: []
},
{
name: '委托金额',
type: 'line',
yAxisIndex: 1,
data: []
}
]
},
optionObj: {
height: ''
},
year: ''
}
},
mounted() {
this._contHide()
},
methods: {
_contHide() {
this.optionObj.height =
(document.documentElement.clientHeight - 300) * (2 / 3) + 'px'
this.optionObj.width =
(document.documentElement.clientWidth - 200) / 1.6 + 'px'
this.heightObj.height =
(document.documentElement.clientHeight - 272) * (2 / 3) + 'px'
},
_openBar(data, result) {
this.year = data
this.option.xAxis[0].data = []
if (result.length === 0) {
this.option.xAxis[0].data = []
this.option.series[0].data = []
this.option.series[1].data = []
} else {
for (let i = 0; i < result.length; i++) {
this.option.xAxis[0].data.push(result[i].entrustDate)
this.option.series[0].data.push(result[i].quantity)
this.option.series[1].data.push(result[i].fee)
}
}
// this.$store
// .dispatch('StatisticContract/pageYearContract', { year: data })
// .then(() => {
// const bar = this.$store.state.StatisticContract.page
// this.option.series[0].data = []
// this.option.series[1].data = []
// for (let j = 0; j < bar.length; j++) {
// for (let k = 0; k < this.option.xAxis[0].data.length; k++) {
// if (bar[j].yearMonth === this.option.xAxis[0].data[k]) {
// this.option.series[0].data[k] = bar[j].total
// this.option.series[1].data[k] = bar[j].price
// }
// }
// }
// })
}
}
}
</script>
pages/soil-statistics/annual-entrust/YearContractPie.vue 0 → 100644
<template>
<div class="border-chart-color">
<div class="chartTitle">
<label>{{year}}年度委托量统计</label>
</div>
<div :style="heightObj" class="chartCont">
<div v-if="showStatistic" style="width:90%">
<IEcharts :option="option" :style="optionObj"></IEcharts>
</div>
<div v-else class="no-statistic-bg" style="margin-top: 100px"></div>
</div>
</div>
</template>
<script>
// import IEcharts from '../../../../../../node_modules/vue-echarts-v3/src/full.js';
export default {
// components: {IEcharts},
data() {
return {
name: 'A',
heightObj: {
height: '300px'
},
option: {
title: {
textStyle: {
fontSize: 14,
fontWeight: 'normal'
},
text: '',
x: 'center'
},
tooltip: {
trigger: 'item',
// formatter: "{b}<br/> : {c} ({d}%)"
formatter: function(a) {
return (
a.name +
'<br>委托额: ' +
a.value +
'</br>占比: ' +
a.percent +
'%'
)
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
top: 20,
bottom: 20,
data: []
},
color: this.$echartColor,
series: [
{
name: '',
type: 'pie',
radius: ['30%', '65%'],
center: ['40%', '50%'],
data: [],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
}
}
]
},
optionObj: {
height: ''
},
pageParams: {},
pie: [],
year: '',
showStatistic: true
}
},
mounted() {
console.log(this.option.series[0].data)
this._contHide()
},
methods: {
_contHide() {
this.optionObj.height =
(document.documentElement.clientHeight - 300) * (2 / 3) + 'px'
this.optionObj.width =
(document.documentElement.clientWidth - 200) / 3.2 + 'px'
this.heightObj.height =
(document.documentElement.clientHeight - 272) * (2 / 3) + 'px'
},
_openPie(data, result) {
this.showStatistic = true
this._page(data, result)
},
_page(data, result) {
this.year = data
if (result.length === 0) {
this.option.series[0].data = []
} else {
let total = 0
const testerList = []
for (let i = 0; i < result.length; i++) {
testerList.push(result[i].entrustDate)
total = total + result[i].quantity
const obj = {}
obj.name = result[i].entrustDate
obj.value = result[i].quantity
obj.fee = result[i].fee
this.option.series[0].data.push(obj)
}
this.option.title.text = '检测项目总量(个):' + total
this.option.legend.data = testerList
}
},
_searchParams() {
const data = this.$serialize('customer-contract-pie')
return this.$extend(data, this.pageParams)
}
}
}
</script>
pages/soil-statistics/annual-entrust/YearContractTable.vue 0 → 100644
<template>
<div>
<Form id="year-contract-table">
<input name="year" type="hidden">
</Form>
<!--<PTVXETable id="table-year" :tableHeight="tableHeight" @on-result-change="_tableResultChange"-->
<!--ref="pageTable" :getPage="getPage" hide-checkbox hide-page :show-footer="true">-->
<!--<vxe-table-column-->
<!--sortable-->
<!--:field="item.key"-->
<!--:title="item.title"-->
<!--:min-width="item.width?item.width:200"-->
<!--:fixed="item.fixed?item.fixed:undefined"-->
<!--v-for="item in pageColumns" :key="item.key">-->
<!--<template slot-scope="scope">-->
<!--<div v-if="item.detail"><a @click.stop="_detailModal(scope.row)">{{scope.row[item.key]}}</a></div>-->
<!--<span v-else>{{scope.row[item.key]}}</span>-->
<!--</template>-->
<!--</vxe-table-column>-->
<!--</PTVXETable>-->
<!--合计 暂时用此表格-->
<element-table
id="table-year"
ref="pageTable"
show-summary="true"
sum="true"
:get-page="getPage"
hide-checkbox
@on-result-change="_tableResultChange"
>
<el-table-column
v-for="item in pageColumns"
:key="item.key"
:prop="item.key"
:label="item.title"
:width="item.width"
:min-width="200"
:fixed="item.fixed?item.fixed:undefined"
sortable
>
<template slot-scope="scope">
<div v-if="item.detail">
<a @click.stop="_detailModal(scope.row)">{{ scope.row[item.key] }}</a>
</div>
<span v-else>{{ scope.row[item.key] }}</span>
</template>
</el-table-column>
</element-table>
<!-- <Details ref="detailsModal"></Details>-->
</div>
</template>
<script>
export default {
components: {
// Details
},
data() {
return {
// tableHeight: '260',
pageColumns: [
{
title: '签订日期',
key: 'entrustDate',
width: 200,
detail: true,
month: true
},
{ title: '委托数量', key: 'quantity' },
{ title: '委托额度', key: 'fee' }
],
getPage: {
records: []
},
year: ''
}
},
mounted() {
this.$refs.pageTable._hideLoading()
},
methods: {
_openTable(data, result) {
this.year = data
this.$refs.pageTable._hideLoading()
this._page(result)
},
_page(data) {
this.getPage.records = data
},
_tableResultChange(msg, data) {
switch (msg) {
case 'changeSize':
// this._page()
this.$refs.pageTable._hideLoading()
break
}
},
_detailModal(data) {
console.log(data)
// this.$refs.detailsModal._open(data)
},
/** *********************************导出-begin*********************************************/
_exportSampleForm() {
let result = []
this.$store
.dispatch('StatisticContract/pageYearContract', this._searchParams())
.then(() => {
result = this.$store.state.StatisticContract.page
if (result.length === 0) {
this.$Message.warning('暂无数据，不可导出！')
} else {
this.$Modal.confirm({
title: '提示',
content: '确定导出全部数据(最多导出5000条)？',
onOk: () => {
this.$exportExcel(
'table-year',
'年度委托量统计表',
this.pageColumns,
result
)
}
})
}
})
},
// 参数
_searchParams() {
const data = this.$serialize('year-contract-table')
if (this.year) {
data.year = this.year
}
return this.$extend(data, { page: 1, rows: 5000 })
}
/** *********************************导出样品台账-end*********************************************/
}
}
</script>
pages/soil-statistics/customer-entrust/MeterCustomerEntrust.vue 0 → 100644
<template>
<div>
<div class="layout-content-padding">
<div class="layout-content-main">
<Row style="margin-top: 10px;">
<!--查询条件-->
<Col span="24">
<div class="fl">
<Form id="search-form" :label-width="70" inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item label="委托日期:">
<el-date-picker
v-model="queryDate"
@change="_dateChange"
type="monthrange"
range-separator="-"
start-placeholder="开始月份"
end-placeholder="结束月份"
size="small"
value-format="yyyy-MM"
>
</el-date-picker>
</Form-item>
<Form-item class="search-btn">
<Button @click="_getData" type="primary" class="width-80">
搜索
</Button>
</Form-item>
</Form>
</div>
<div class="clear"></div>
</Col>
<!--内容-->
<Col span="24">
<Row :gutter="16">
<Col span="14">
<element-table
id="table-year"
ref="pageTable"
:table-height="tableHeight"
:get-page="getPage"
@on-result-change="_tableResultChange"
hide-checkbox
>
<el-table-column fixed type="index" label="序号" width="100">
</el-table-column>
<el-table-column
v-for="item in pageColumns"
:key="item.key"
:prop="item.key"
:label="item.title"
:width="item.width"
:min-width="200"
:fixed="item.fixed?item.fixed:undefined"
>
<template slot-scope="scope">
<div v-if="item.detail">
<a @click.stop="_detailModal(scope.row)">{{ scope.row[item.key] }}</a>
</div>
<span v-else>{{ scope.row[item.key] }}</span>
</template>
</el-table-column>
</element-table>
</Col>
<Col span="10">
<!--pie-->
<UserTestPie ref="testPieModal"></UserTestPie>
</Col>
</Row>
</Col>
</Row>
</div>
</div>
</div>
</template>
<script>
// eslint-disable-next-line import/named
import { soilStatistics } from '../../../api'
import UserTestPie from './UserTestPie'
export default {
components: {
UserTestPie
},
data() {
const date = this.$dateformat(new Date(), 'yyyy-mm')
const nextMonth = this.$dateformat(
new Date().setMonth(new Date().getMonth() + 1),
'yyyy-mm'
)
return {
beginDate: new Date(),
endDate: new Date(),
groupId: '',
groupName: '',
tester: '',
testerId: '',
pageColumns: [
{ title: '委托单位', key: 'client', detail: true },
{ title: '委托数量', key: 'quantity' },
{ title: '委托额度', key: 'fee' }
],
groupData: [],
getPage: {
records: []
},
formObj: {
edateBegin: undefined,
edateEnd: undefined
},
tempData: {
groupId: '',
groupName: '',
beginDate: date,
endDate: nextMonth
},
testerData: [],
queryDate: [date, nextMonth],
serviceType: '',
serviceTypeList: []
}
},
computed: {
tableHeight: function() {
return this.$tableHeight('search')
}
},
mounted() {
this.$refs.pageTable._hideLoading()
const str = this.tempData.endDate
const arr = str.split('-')
const lastday = this.mGetDate(arr[0], arr[1]).getTime() - 1
// this._contHide()
// this._getUserGroup()
this.formObj.edateBegin = this.tempData.beginDate
this.formObj.edateEnd = this.$dateformat(lastday, 'yyyy-mm-dd HH:MM:ss')
// this._getData()
// this._getServiceTypeList()
},
methods: {
mGetDate(year, month) {
const d = new Date(year, month, 1)
return d
},
// 服务类型
_getData: async function() {
console.log('753951')
console.log('选择时间后的请求', this.formObj)
const result = await soilStatistics.pageCustomerEntrustStatistics(
this.formObj
)
if (result) {
this.getPage.records = result
this.$refs.testPieModal._openPie(this.getPage.records)
}
},
// 检测项目详情
_detailModal(data) {
const obj = {
testerIds: [data.testerId],
groupIds: this.groupIds,
beginDate: this.tempData.beginDate,
endDate: this.tempData.endDate
}
console.log(obj)
// this.$refs.detailModal._open(obj)
},
_dateChange(data) {
if (data) {
this.formObj.edateBegin = data[0]
this.formObj.edateEnd = data[1]
const str = data[1]
const arr = str.split('-')
const lastday = this.mGetDate(arr[0], arr[1]).getTime() - 1
this.formObj.edateEnd = this.$dateformat(lastday, 'yyyy-mm-dd HH:MM:ss')
} else {
this.tempData.edateBegin = ''
this.tempData.edateEnd = ''
this.formObj.edateBegin = undefined
this.formObj.edateEnd = undefined
}
},
_contHide() {
this.tempData.beginDate = this.$dateformat(new Date(), 'yyyy-mm')
this.tempData.endDate = this.$dateformat(new Date(), 'yyyy-mm')
// this._page()
// this._getById()
},
_page() {
const data = {}
if (this.groupId) {
data.groupId = this.groupId
}
if (this.tester && this.testerId) {
data.testerId = this.testerId
} else {
this.testerId = ''
}
if (this.tempData.beginDate) {
data.beginDate = this.tempData.beginDate
}
if (this.tempData.endDate) {
data.endDate = this.tempData.endDate
}
if (this.serviceType) {
data.serviceType = this.serviceType
}
this.$refs.pageTable._page(
'search-form',
'FoodItem/pagePersonalTask',
data
)
},
_formSearch() {
this.$refs.pageTable._pageChange(1)
},
_search() {
this.tempData.groupId = this.groupId
this.tempData.groupName = this.groupId ? this.groupName : ''
this.tempData.serviceType = this.serviceType ? this.serviceType : ''
this.$refs.testPieModal._openPie(this.tempData)
this._formSearch()
},
_tableResultChange(msg, data) {
switch (msg) {
case 'changeSize':
// this._page()
break
}
},
/** *********************************导出-begin*********************************************/
_exportSampleForm() {
let result = []
this.$store
.dispatch('FoodItem/pagePersonalTask', this._searchParams())
.then(() => {
result = this.$store.state.FoodItem.page.records
this.$Modal.confirm({
title: '提示',
content: '确定导出全部数据？',
onOk: () => {
this.$exportExcel(
'personalTestNum',
'个人检测量统计表',
this.pageColumns,
result
)
}
})
})
},
// 参数
_searchParams() {
const data = {}
if (this.groupId) {
data.groupId = this.groupId
}
if (this.tester && this.testerId) {
data.testerId = this.testerId
} else {
this.testerId = ''
}
if (this.tempData.beginDate) {
data.beginDate = this.tempData.beginDate
}
if (this.tempData.endDate) {
data.endDate = this.tempData.endDate
}
return this.$extend(data, { page: 1, rows: 5000 })
},
/** *********************************导出样品台账-end*********************************************/
_getUserGroup() {
this.$store.dispatch('LmsUserGroup/list').then(() => {
this.groupData = this.$store.state.LmsUserGroup.list
})
},
// 主检人&检测科室
_groupChange(data) {
if (data) {
this.groupName = data.label
this.groupId = data.value
this.testerId = ''
this.tester = ''
this._getUserList(data.value)
}
},
_getUserList(groupId, realname) {
const data = { page: 1, rows: 50 }
if (groupId) {
Object.assign(data, { groupId: groupId })
}
if (realname) {
Object.assign(data, { realname: realname })
}
this.$store.dispatch('LmsUserGroup/getUserByGroupId', data).then(() => {
this.testerData = this.$store.state.LmsUserGroup.userPage.records
})
},
_testerChange(msg, data) {
switch (msg) {
case 'select':
this.tester = data.realname
this.testerId = data.userId
break
case 'blur':
this.tester = ''
break
case 'query':
this.tester = data.realname
this._getUserList('', data.realname)
break
}
}
}
}
</script>
<style>
.border-chart-color {
border: 1px solid #e9eaec;
}
.chartTitle {
height: 32px;
line-height: 32px;
background: #f8f8f9;
padding-left: 15px;
border-bottom: 1px solid #e9eaec;
}
.chartTitle label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
</style>
pages/soil-statistics/customer-entrust/UserTestPie.vue 0 → 100644
<template>
<div class="border-chart-color">
<div class="chartTitle">
<label>{{ groupName }} 客户委托量比率</label>
</div>
<div :style="heightObj" class="chartCont">
<div v-if="showStatistic" style="width:90%">
<IEcharts :option="option" :style="optionObj"></IEcharts>
</div>
<div v-else :style="noDataObj" class="no-statistic-bg"></div>
</div>
<form id="persontal-task-pie">
<input name="groupId" type="hidden" />
<input name="beginDate" type="hidden" />
<input name="endDate" type="hidden" />
<input name="groupName" type="hidden" />
<input name="serviceType" type="hidden" />
</form>
</div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full'
export default {
// components: { IEcharts },
data() {
return {
// 科室名称
groupName: '',
showStatistic: true,
heightObj: {
height: '300px'
},
option: {
title: {
x: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: function(a) {
return (
a.name +
'</br>样品量: ' +
a.data.value +
'<br>占比: ' +
a.percent +
'%'
)
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
top: 20,
bottom: 20,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
color: this.$echartColor,
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
},
optionObj: {
height: ''
},
noDataObj: {
marginTop: ''
}
}
},
mounted() {
this._contHide()
},
methods: {
_contHide() {
this.optionObj.height = document.documentElement.clientHeight - 300 + 'px'
this.heightObj.height = document.documentElement.clientHeight - 272 + 'px'
this.noDataObj.marginTop =
(document.documentElement.clientHeight - 450) / 2 + 'px'
this.optionObj.width =
(document.documentElement.clientWidth - 200) / 2.6 + 'px'
},
_openPie(data) {
const testerList = []
const seriesList = []
let total = 0
for (let i = 0; i < data.length; i++) {
testerList.push(data[i].client)
total = total + data[i].quantity
seriesList.push({
value: data[i].quantity,
name: data[i].client,
total: data[i].quantity
})
}
this.option.title.text = '委托单总量(个):' + total
this.option.legend.data = testerList
this.option.series[0].data = seriesList
console.log(this.option.series[0].data)
},
_searchParams() {
const data = this.$serialize('persontal-task-pie')
return this.$extend(data)
}
}
}
</script>
pages/soil-statistics/failItem.vue 0 → 100644
<template>
<div>
<div class="tabBox clearfix" style="position: relative;background-color: white;margin-bottom: 20px;margin-top: 20px;">
<el-tabs v-model="activeName">
<el-tab-pane label="不合格项目" name="first">
<div class="saleBox" style="padding-left: 20px;float: left;background-color: lightblue">
<p style="font-size: 14px;">
<!-- {{ range }}不合格数量-->
不合格数量
</p>
<div id="saleImg" style="width: 660px;height: 260px;" />
</div>
</el-tab-pane>
</el-tabs>
<div class="timeBox" style="float: right;position: absolute;right: 0px;top: 0px;">
<div style="float: left;line-height: 34px;">
<!-- <a @click="_rangeDayChange" :class="{actived:pitch=='_rangeDayChange'}">今日</a>-->
<!-- <a @click="_rangeWeekChange" :class="{actived:pitch=='_rangeWeekChange'}">本周</a>-->
<!-- <a @click="_rangeMonthChange" :class="{actived:pitch=='_rangeMonthChange'}">本月</a>-->
<!-- <a @click="_rangeYearChange" :class="{actived:pitch=='_rangeYearChange'}">本年</a>-->
<a>今日</a>
<a>本周</a>
<a>本月</a>
<a>本年</a>
</div>
<div class="calendar" style="overflow: hidden">
<div class="block">
<el-date-picker
v-model="value1"
:default-time="['12:00:00']"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="width: 200px;margin-left: 20px;"
/>
</div>
</div>
</div>
</div>
<div class="failTable">
<Form
v-show="searchOpen"
:label-width="70"
inline
onsubmit="return false"
class="search-form"
>
<label class="label-sign" />
<Form-item class="search-item" label="物料类型:">
<Input v-model="formObj.name" @on-enter="_formSearch" placeholder="请输入物料类型" clearable />
</Form-item>
<Form-item class="search-btn">
<Button @click="_formSearch" type="primary">
搜索
</Button>
</Form-item>
</Form>
<element-table
ref="pageTable"
:page-columns="pageColumns"
:table-height="tableHeight"
:get-page="getPage"
:opt-col-width="80"
@on-result-change="_tableResultChange"
>
<el-table-column
v-for="item in pageColumns"
:key="item.key"
:prop="item.key"
:label="item.title"
:width="item.width"
:min-width="200"
:fixed="item.fixed?item.fixed:undefined"
show-overflow-tooltip
sortable
>
<template slot-scope="scope">
<div v-if="item.dateTime">
{{ scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd HH:MM:ss'):'' }}
</div>
<span v-else-if="item.type" class="blue-color">
{{ scope.row[item.key] === undefined ? '': scope.row[item.key].display }}
</span>
<div v-else>
{{ scope.row[item.key] }}
</div>
</template>
</el-table-column>
<!-- <el-table-column-->
<!-- slot="col"-->
<!-- label="操作"-->
<!-- align="center"-->
<!-- :width="100"-->
<!-- fixed="right"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <icon-list-->
<!-- :msg="iconMsg"-->
<!-- :row-data="scope.row"-->
<!-- @on-result-change="_iconClick"-->
<!-- />-->
<!-- </template>-->
<!-- </el-table-column>-->
</element-table>
</div>
</div>
</template>
<script>
// eslint-disable-next-line import/named
import { soilStatistics } from '../../api'
import { saleImg } from '../../api/homePage'
export default {
name: 'FailItem',
data() {
return {
activeName: 'first',
value1: '',
searchOpen: false,
pageColumns: [
{ title: '项目名称', key: 'name', width: '150' },
{ title: '样品编号', key: 'sampleCode', width: '130' },
{ title: '物料名称', key: 'sampleName', width: '130' },
{ title: '检测值', key: 'testValue', width: '100' },
{ title: '限量值', key: 'limitValue', width: '190' },
{ title: '检测依据', key: 'code', width: '350' },
{ title: '检测依据名称', key: 'standardName', width: '350' }
],
formObj: {
name: ''
},
getPage: {},
iconMsg: [
// { type: 'pt-a-edit', id: '', name: '编辑' },
// { type: 'pt-a-trash', id: '', name: '删除' }
]
}
},
computed: {
tableHeight: function() {
if (this.searchOpen) {
return this.$tableHeight('search') - 200
} else {
return this.$tableHeight('noSearch') - 200
}
}
},
mounted() {
// this._getItemFail()
// this._page()
},
methods: {
_getItemFail: async function() {
const result = await soilStatistics.getItemFail(this.queryRange)
if (result) {
console.log('getItemFail', result)
this.itemNotOk = result
saleImg(result)
}
},
_page: async function() {
Object.assign(this.formObj, this.$refs.pageTable._searchParams())
const result = await soilStatistics.pageItemFail(
this.$serializeForm(this.formObj)
)
if (result) {
this.getPage = result
this.$refs.pageTable._initTable()
}
},
_formSearch() {},
_iconClick(res, data) {
switch (res) {
case '编辑':
this._editModal(data.id)
break
case '删除':
this._deleteById(data.id)
break
}
},
_tableResultChange(msg, data) {
switch (msg) {
case 'page':
this._page()
break
case 'iconClick':
this._iconClick(data.name, data.rowData)
break
}
}
}
}
</script>
<style scoped>
</style>
pages/soil-statistics/personal-task/UserTestPie.vue 0 → 100644
<template>
<div class="border-chart-color">
<div class="chartTitle">
<label>{{groupName}} 员工工作量比率</label>
</div>
<div :style="heightObj" class="chartCont">
<div v-if="showStatistic" style="width:90%">
<IEcharts :option="option" :style="optionObj"></IEcharts>
</div>
<div v-else :style="noDataObj" class="no-statistic-bg"></div>
</div>
<form id="persontal-task-pie">
<input name="groupId" type="hidden"/>
<input name="beginDate" type="hidden"/>
<input name="endDate" type="hidden"/>
<input name="groupName" type="hidden"/>
<input name="serviceType" type="hidden"/>
</form>
</div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full'
export default {
// components: { IEcharts },
data() {
return {
// 科室名称
groupName: '',
showStatistic: true,
heightObj: {
height: '300px'
},
option: {
title: {
x: 'center',
textStyle: {
fontSize: 14,
fontWeight: 'normal'
}
},
tooltip: {
trigger: 'item',
formatter: function(a) {
return (
a.name +
'</br>样品量: ' +
a.data.value +
'<br>占比: ' +
a.percent +
'%'
)
}
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 0,
top: 20,
bottom: 20,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
color: this.$echartColor,
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
},
optionObj: {
height: ''
},
noDataObj: {
marginTop: ''
}
}
},
mounted() {
this._contHide()
},
methods: {
_contHide() {
this.optionObj.height = document.documentElement.clientHeight - 300 + 'px'
this.heightObj.height = document.documentElement.clientHeight - 272 + 'px'
this.noDataObj.marginTop =
(document.documentElement.clientHeight - 450) / 2 + 'px'
this.optionObj.width =
(document.documentElement.clientWidth - 200) / 2.6 + 'px'
},
_openPie(data) {
// alert(this.option.series[0].data)
const testerList = []
const seriesList = []
let total = 0
for (let i = 0; i < data.length; i++) {
testerList.push(data[i].tester)
total = total + data[i].total
seriesList.push({
value: data[i].total,
name: data[i].tester,
total: data[i].total,
ratio: data[i].ratio
})
}
this.option.title.text = '检测项目总量(个):' + total
this.option.legend.data = testerList
this.option.series[0].data = seriesList
console.log(this.option.series[0].data)
},
_searchParams() {
const data = this.$serialize('persontal-task-pie')
return this.$extend(data)
}
}
}
</script>
pages/soil-statistics/yearDeclara.vue 0 → 100644
<template>
<div>
<div class="dateBox">
<div class="block">
<span class="demonstration">签订日期</span>
<el-date-picker
v-model="dateValue"
type="year"
style="width: 150px;"
placeholder="选择年"
/>
</div>
</div>
<div class="chartBox clearfix">
<div class="barChartBox" style="width: 700px;height: 240px;margin-top: 20px;border: 1px solid lightgray;float: left">
<div class="barChartTitle" style="height: 32px;background-color: #f8f8f9;line-height: 32px;border-bottom: 1px solid lightgray">
<span style="font-size: 14px;color: #333333;font-weight: bold;">年度委托量统计</span>
</div>
<div class="barChartBody" style="padding: 15px;">
<div id="barChart" style="width: 100%;height: 180px;" />
</div>
</div>
<div class="pieChartBox" style="width: 350px;height: 240px;margin-top: 20px;border: 1px solid lightgray;float: left">
<div class="pieChartTitle" style="height: 32px;background-color: #f8f8f9;line-height: 32px;border-bottom: 1px solid lightgray">
<span style="font-size: 14px;color: #333333;font-weight: bold;">年度委托量统计</span>
</div>
<div class="pieChartBody" style="padding: 15px;">
<div id="pieChart" style="width: 100%;height: 180px;" />
</div>
</div>
</div>
<div class="tableBox">
<el-table
:data="tableData"
border
show-summary
style="width: 100%;"
>
<el-table-column
v-for="(item,index) in tableColumn"
:key="index"
:prop="item.key"
:label="item.title"
sortable
class="tablecolumn"
/>
</el-table>
</div>
</div>
</template>
<script>
export default {
name: 'YearDeclara',
data() {
return {
dateValue: ' ',
tableColumn: [
{ title: '签订日期', key: 'date' },
{ title: '委托数量', key: 'entrustNum' },
{ title: '委托额度', key: 'entrustLimit' },
{ title: '实收额度', key: 'chargedLImit' },
{ title: '未收额度', key: 'unchargedLImit' }
],
tableData: [
{
date: '2020-1',
entrustNum: 1,
entrustLimit: 1,
chargedLImit: 1,
unchargedLImit: 1
},
{
date: '2020-2',
entrustNum: 2,
entrustLimit: 2,
chargedLImit: 2,
unchargedLImit: 2
},
{
date: '2020-3',
entrustNum: 3,
entrustLimit: 3,
chargedLImit: 3,
unchargedLImit: 3
},
{
date: '2020-4',
entrustNum: 4,
entrustLimit: 4,
chargedLImit: 4,
unchargedLImit: 4
}
]
}
},
mounted() {
// this.barChart()
// this.pieChart()
},
methods: {
barChart() {
const echarts = require('echarts')
const myChart = echarts.init(document.getElementById('barChart'))
myChart.setOption({
// color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
grid: {
// left: '2%',
// right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
splitLine: {
show: false
},
data: [
'2020-1',
'2020-2',
'2020-3',
'2020-4',
'2020-5',
'2020-6',
'2020-7',
'2020-8',
'2020-9',
'2020-10',
'2020-11',
'2020-12'
],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: false
},
name: '委托量(份)'
},
{
type: 'value',
splitLine: {
show: false
},
name: '委托金额(元)'
}
],
series: [
{
name: '委托量',
type: 'bar',
barWidth: '60%',
data: [9, 16, 59, 39, 89],
itemStyle: {
normal: {
color: 'lightblue'
}
}
},
{
name: '委托金额',
type: 'line',
// barWidth: '60%',
yAxisIndex: 1,
data: [0, 0, 0, 100000, 2000],
itemStyle: {
normal: {
color: 'red'
}
}
}
]
})
},
pieChart() {
const echarts = require('echarts')
const myChart = echarts.init(document.getElementById('pieChart'))
myChart.setOption({
title: {
text: '委托总金额',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'right',
data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5']
},
series: [
{
name: '委托金额',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: 0, name: '2020-1' },
{ value: 0, name: '2020-2' },
{ value: 0, name: '2020-3' },
{ value: 100000, name: '2020-4' },
{ value: 2000, name: '2020-5' }
]
}
]
})
}
}
}
</script>
<style scoped>
</style>
router/soil-routes.js
......@@ -18,6 +18,11 @@ import TestInputIndex from '../pages/soil-test-manage/test-input/TestInputIndex'
import CheckIndex from '../pages/soil-test-manage/test-data-check/CheckIndex'
import AuditIndex from '../pages/soil-test-manage/test-data-audit/AuditIndex'
import ReportMakeIndex from '../pages/soil-report-manage/report-make/ReportMakeIndex'
import failItem from '../pages/soil-statistics/failItem'
import yearDeclara from '../pages/soil-statistics/yearDeclara'
import MeterCustomerEntrust from '../pages/soil-statistics/customer-entrust/MeterCustomerEntrust'
import MeterPersonalTask from '../pages/soil-statistics/personal-task/MeterPersonalTask'
import MeterAnnualEntrust from '../pages/soil-statistics/annual-entrust/MeterAnnualEntrust'
import Blank from '~/pages/blank'
export default [
{
......@@ -129,5 +134,36 @@ export default [
meta: { title: '试验项目' }
}
]
},
{
path: 'statistics',
component: Blank,
children: [
{
path: 'fail_item_statistics',
component: failItem,
meta: { title: '不合格项目查询' }
},
{
path: 'year_declara_count',
component: yearDeclara,
meta: { title: '年度报检量统计' }
},
{
path: 'customer_entrust',
component: MeterCustomerEntrust,
meta: { title: '客户委托量统计' }
},
{
path: 'annual_entrust',
component: MeterAnnualEntrust,
meta: { title: '年度委托量统计' }
},
{
path: 'personal_task',
component: MeterPersonalTask,
meta: { title: '个人检测任务查询' }
}
]
}
]
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