Skip to content

P
patzn-cloud-web-back-soil
Commit 1db9daae by lichengming
Options

修改了统计分析

parent 7ac1cd85
Showing with 717 additions and 221 deletions
pages/meter-statistics/annual-entrust/MeterAnnualEntrust.vue
<template>
<div>
<!--内容-->
<div class="layout-content-padding">
<div class="layout-content-main">
<Row>
<!--查询-->
<Col span="24" style="margin-top:10px">
<Form :d="formId" :label-width="90" v-show="searchOpen" inline onsubmit="return false">
<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 class="search-item" label="检定依据:" style="margin-left: -20px">
<Input @on-enter="_formSearch" v-model="formObj.code" name="judgeBasis" placeholder="请输入判定依据" clearable/>
</Form-item>
<Form-item class="search-item" label="检定依据名称:">
<Input @on-enter="_formSearch" v-model="formObj.name" name="judgeBasisName" placeholder="请输入判定依据名称" clearable/>
</Form-item>
<Form-item class="search-btn">
<Button @click="_formSearch" type="primary">搜索</Button>
<Form-item label="签订日期:">
<DatePicker v-model="date" :editable="false" @on-change="_dateChange" :clearable="false" type="year"
style="width:90px"></DatePicker>
</Form-item>
</Form>
</div>
<div class="fr">
<Button @click="_export" class="width-80">导出</Button>
</div>
<div class="clear"></div>
</Col>
<!--操作-->
<!--内容-->
<Col span="24">
<btn-list :msg="btn" :open="searchOpen" :showSearchBtn="true" @on-result-change="_btnClick"
class="contHide"></btn-list>
<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">
<PTVXETable
ref="pageTable"
:form-id="formId"
:tableHeight="tableHeight"
:getPage="getPage"
:iconMsg="iconMsg"
@on-result-change="_tableResultChange">
<vxe-table-column
v-for="item in pageColumns"
:key="item.key"
:field="item.key"
:title="item.title"
:width="item.width"
:min-width="200"
:fixed="item.fixed?item.fixed:undefined"
sortable
>
<template slot-scope="scope">
<span v-if="item.date">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):''}}</span>
<span v-else>{{scope.row[item.key]}}</span>
</template>
</vxe-table-column>
</PTVXETable>
<!--table-->
<YearContractTable ref="tableModal"></YearContractTable>
</Col>
</Row>
</Col>
</Row>
</div>
</div>
</div>
</template>
<script>
import { meterAptitude } from '../../../api'
import YearContractTable from './YearContractTable'
import YearContractBar from './YearContractBar'
import YearContractPie from './YearContractPie'
export default {
name: 'MeterAptitudeStandard',
components: {},
components: {
YearContractTable,
YearContractBar,
YearContractPie
},
data() {
return {
formId: 'meterAptitudeFormId',
pageColumns: [
{ title: '检定依据', key: 'code', width: 160 },
{ title: '检定依据名称', key: 'name' },
{ title: '登记时间', key: 'ctime', date: true, width: 140 },
{ title: '备注', key: 'remark' }
],
btn: [
{ type: 'success', id: '', name: '添加' },
{ type: 'error', id: '', name: '删除' }
],
iconMsg: [
{ type: 'md-create', id: '', name: '编辑' },
{ type: 'md-trash', id: '', name: '删除' }
],
formObj: {
name: undefined,
code: undefined
},
searchOpen: true,
selectIds: [],
getPage: {},
typeData: []
}
},
computed: {
tableHeight: function() {
if (this.searchOpen) {
return this.$tableHeight('search')
} else {
return this.$tableHeight('noSearch')
}
date: new Date()
}
},
mounted() {
this._page()
this._open()
},
methods: {
_btnClick(msg) {
switch (msg) {
case '添加':
this._editModal(false)
break
case '删除':
this._deleteSelected()
break
case '导入':
this._import()
break
case '导出':
this._export()
break
case 'search':
this.searchOpen = !this.searchOpen
break
}
},
_iconClick(res, data) {
switch (res) {
case '编辑':
this._editModal(true, data.id)
break
case '删除':
this._deleteById(data.id)
break
case '操作日志':
this._record(data.id)
break
}
},
_page: async function() {
console.log(9522123)
// this.$refs.pageTable._page('search-form-package', 'FoodJudgeBasis/page')
Object.assign(this.formObj, this.$refs.pageTable._searchParams())
console.log('this.formObj', this.formObj)
const result = await meterAptitude.page(this.formObj)
if (result) {
console.log(55555)
console.log(result)
this.getPage = result
console.log(123456789)
console.log(this.getPage)
this.$refs.pageTable._hideLoading()
}
_open() {
this.$refs.tableModal._openTable(this.date.getFullYear())
this.$refs.barModal._openBar(this.date.getFullYear())
this.$refs.pieModal._openPie(this.date.getFullYear())
},
_formSearch() {
this.$refs.pageTable._pageChange(1)
_dateChange(data) {
this.$refs.tableModal._openTable(data)
this.$refs.barModal._openBar(data)
this.$refs.pieModal._openPie(data)
},
_tableResultChange(msg, data) {
switch (msg) {
case 'page':
this.getPage = this.$store.state.FoodJudgeBasis.page
break
case 'selectIds':
this.selectIds = data
break
case 'iconClick':
this._iconClick(data.name, data.rowData)
break
case 'changeSize':
this._page()
break
}
},
// 删除
_deleteByIds(ids, content) {
this.$Modal.confirm({
title: '提示',
content: content || '确定删除该记录？',
onOk: () => {
this._delete(ids)
}
})
},
_delete: async function(ids) {
const result = await meterAptitude.deleteById(ids)
if (result) {
this._formSearch()
this.$Message.success('删除成功！')
}
},
_deleteById(id) {
// 删除一条记录
this._deleteByIds([id])
},
_deleteSelected() {
// 批量删除
const ids = this.selectIds
if (ids.length === 0) {
this.$Message.warning('请选择一条或多条数据！')
} else {
this._deleteByIds(ids, '确定删除这 ' + ids.length + ' 条记录？')
}
},
// 编辑&添加
_editModal(edit, id) {
if (edit) {
this._getById(id)
// 编辑
// this.$store.dispatch('FoodJudgeBasis/getById', id).then(() => {
// this.$refs.editModal._open(this.$store.state.FoodJudgeBasis.model)
// })
} else {
// 添加
this.$refs.editModal._open()
}
},
_getById: async function(id) {
const result = await meterAptitude.getById(id)
if (result) {
this.$refs.editModal._open(result)
}
},
// 导入
_import() {
const data = {
importUrl:
'/food/v1/food_aptitude_judge_basis/food_aptitude_judge_import',
downloadUrl: '/food/v1/excel/template/FoodAptitudeJudgeBasis',
title: '导入检验方法管理'
}
this.$refs.sampleModal._open(data)
},
// 导出
_export() {
console.log('.this.selectIds', this.selectIds)
if (this.selectIds.length === 0) {
this.$Message.warning('请选择需要导出的数据')
} else {
const content = '确定导出 ' + this.selectIds.length + ' 条记录？'
this.$Modal.confirm({
title: '提示',
content: content,
onOk: () => {
// eslint-disable-next-line no-undef
http.open(
'/food/v1/food_aptitude_judge_basis/food_aptitude_judge_export?ids=' +
this.selectIds
)
}
})
}
this.$refs.tableModal._exportSampleForm()
}
}
}
</script>
<style scoped>
<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/meter-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: [0, 100, 80, 90, 0, 200, 0, 0, 0, 0, 0, 0]
},
{
name: '委托金额',
type: 'line',
yAxisIndex: 1,
data: [0, 200, 150, 60, 0, 100, 0, 0, 0, 0, 0, 0]
}
]
},
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) {
console.log('data', 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('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/meter-statistics/annual-entrust/YearContractNumDetail.vue 0 → 100644
<template>
<Modal v-model="showModal" width="100" class="modal-footer-none full-screen">
<p slot="header">{{modalTitle}}</p>
<div>
<Row>
<!--查询-->
<Col span="24">
<Form id="search-form-details" ref="formObj" :label-width="70" :model="formObj" v-show="searchOpen"
inline onsubmit="return false">
<label class="label-sign"></label>
<Form-item class="search-item" label="委托单位:" prop="cname">
<Input v-model="formObj.cname" @on-enter="_formSearch" placeholder="请输入委托单位" clearable/>
</Form-item>
<Form-item class="search-item" label="委托编号:" prop="code">
<Input v-model="formObj.code" @on-enter="_formSearch" placeholder="请输入委托编号" clearable/>
</Form-item>
<Form-item class="search-item" label="业务员:" prop="salesman">
<Input v-model="formObj.salesman" @on-enter="_formSearch" placeholder="请输入业务员" clearable/>
</Form-item>
<Form-item class="search-item" label="制单日期:">
<Date-picker @on-change="_signDateChange" v-model="dateList" type="daterange" split-panels
style="width:100%;" placeholder="请选择制单日期"/>
</Form-item>
<Form-item class="search-btn">
<Button @click="_formSearch" type="primary">搜索</Button>
</Form-item>
</Form>
</Col>
<Col span="24">
<btn-list :msg="btn" :open="searchOpen" :showSearchBtn="true" @on-result-change="_btnClick"
class="contHide"></btn-list>
</Col>
<Col span="24">
<PTVXETable ref="pageTable" :tableHeight="tableHeight"
@on-result-change="_tableResultChange" :getPage="getPage" select-data>
<vxe-table-column
: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" sortable>
<template slot-scope="scope">
<span v-if="item.date">{{scope.row[item.key]?$dateformat(scope.row[item.key],'yyyy-mm-dd'):''}}</span>
<div v-else>{{scope.row[item.key]}}</div>
</template>
</vxe-table-column>
</PTVXETable>
</Col>
</Row>
</div>
</Modal>
</template>
<script>
export default {
data() {
return {
modalTitle: '',
showModal: false,
getPage: {},
pageColumns: [
{ title: '委托单位', key: 'cname' },
{ title: '委托名称', key: 'name' },
{ title: '委托编号', key: 'code' },
{ title: '委托金额', key: 'contractAmount', width: 90 },
{ title: '已收金额', key: 'bereturnedAmount', width: 90 },
{ title: '业务员', key: 'salesman', width: 120 },
{ title: '制单日期', key: 'ctime', width: 120, date: true },
{ title: '制单人', key: 'uname', width: 120 }
],
formObj: {
yearMonth: '',
ctimeBegin: '',
ctimeEnd: '',
cname: '',
code: '',
salesman: ''
},
dateList: [],
btn: [{ type: '', id: '', name: '导出' }],
searchOpen: true,
selectData: []
}
},
computed: {
tableHeight() {
if (this.searchOpen) {
return this.$tableHeight('', 200)
} else {
return this.$tableHeight('', 150)
}
}
},
methods: {
_btnClick(msg) {
console.log(msg)
switch (msg) {
case '导出':
this._exportContract()
break
case 'search':
this.searchOpen = !this.searchOpen
break
}
},
/** *********************************导出合同-begin*********************************************/
_exportContract() {
let result = []
if (this.selectData.length === 0) {
// 导出全部数据
this.$Modal.confirm({
title: '提示',
content:
this.selectData.length === 0
? '确定导出全部数据（最多导出5000条）？'
: '确定导出这' + result.length + ' 条数据？',
onOk: () => {
this.$store
.dispatch('FoodContract/barYearContract', this._searchParams())
.then(() => {
result = this.$store.state.FoodContract.page.records
this.$exportExcel(
'yearContractNumDetail',
'委托明细',
this.pageColumns,
result
)
})
}
})
} else {
// 只导出选中的数据
result = this.selectData
this.$Modal.confirm({
title: '提示',
content:
this.selectData.length === 0
? '确定导出全部数据（最多导出5000条）？'
: '确定导出这' + result.length + ' 条数据？',
onOk: () => {
this.$exportExcel(
'yearContractNumDetail',
'委托明细',
this.pageColumns,
result
)
}
})
}
},
// 参数
_searchParams() {
const data = this.$serializeFormSearch(this.formObj)
return this.$extend(data, { page: 1, rows: 5000 })
},
/** *********************************导出合同-end*********************************************/
_open(data) {
this.modalTitle = data.yearMonth + ' -- 委托列表 '
this.showModal = true
this.$refs.formObj.resetFields()
this.formObj.yearMonth = data.yearMonth
this.formObj.ctimeBegin = ''
this.formObj.ctimeEnd = ''
this.dateList = []
this._page()
},
_page() {
this.$refs.pageTable._page(
'search-form-details',
'FoodContract/barYearContract',
this.$serializeFormSearch(this.formObj)
)
},
_formSearch() {
this.$refs.pageTable._pageChange(1)
},
_tableResultChange(msg, data) {
switch (msg) {
case 'page':
this.getPage = this.$store.state.FoodContract.page
break
case 'selectData':
this.selectData = data
break
case 'changeSize':
this._page()
break
}
},
_search() {
this._page()
},
// 查询-接收日期
_signDateChange(data) {
this.formObj.ctimeBegin = data[0]
this.formObj.ctimeEnd = data[1]
}
}
}
</script>
pages/meter-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: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
],
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
}
}
]
},
optionObj: {
height: ''
},
pageParams: {},
pie: [],
year: '',
showStatistic: false
}
},
mounted() {
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) {
this.showStatistic = true
// this._page(data)
},
_page(data) {
this.year = data
this.$store
.dispatch('StatisticContract/pageYearContract', { year: data })
.then(() => {
const pie = this.$store.state.StatisticContract.page
let num = 0
this.option.series[0].data = []
this.option.legend.data = []
for (let i = 0; i < pie.length; i++) {
this.option.series[0].data.push({
value: pie[i].price,
name: pie[i].yearMonth,
items: pie[i].radio
})
this.option.legend.data.push(pie[i].yearMonth)
num += pie[i].price
}
this.option.title.text = data + '年委托总金额(元)：' + num
if (pie.length === 0) {
this.showStatistic = false
} else {
this.showStatistic = true
}
})
},
_searchParams() {
const data = this.$serialize('customer-contract-pie')
return this.$extend(data, this.pageParams)
}
}
}
</script>
pages/meter-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>-->
<!--合计 暂时用此表格-->
<ElTableNoPage id="table-year" ref="pageTable" :tableHeight="tableHeight"
@on-result-change="_tableResultChange" :getPage="getPage" hide-checkbox show-summary="true">
<el-table-column
:prop="item.key"
:label="item.title"
:width="item.width"
:min-width="200"
:fixed="item.fixed?item.fixed:undefined"
v-for="item in pageColumns"
:key="item.key" 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>
</ElTableNoPage>
<Details ref="detailsModal"></Details>
</div>
</template>
<script>
import Details from './YearContractNumDetail'
export default {
components: {
Details
},
data() {
return {
tableHeight: '260',
pageColumns: [
{
title: '签订日期',
key: 'yearMonth',
width: 200,
detail: true,
month: true
},
{ title: '委托数量', key: 'total' },
{ title: '委托额度', key: 'price' },
{ title: '实收额度', key: 'collectPrice' },
{ title: '未收额度', key: 'noCollectPrice' }
],
getPage: {
records: [
{
yearMonth: '2020-6',
price: '230',
total: '1',
collectPrice: '200',
noCollectPrice: '30'
},
{
yearMonth: '2020-7',
price: '260',
total: '2',
collectPrice: '230',
noCollectPrice: '30'
}
]
},
year: ''
}
},
methods: {
_openTable(data) {
this.year = data
this.$refs.pageTable._hideLoading()
// this._page()
},
_page() {
const data = {}
if (this.year) {
data.year = this.year
}
this.$refs.pageTable._page(
'year-contract-table',
'StatisticContract/pageYearContract',
data
)
},
_tableResultChange(msg, data) {
switch (msg) {
case 'page':
this.getPage.records = this.$store.state.StatisticContract.page
this.$refs.pageTable._hideLoading()
break
case 'changeSize':
// this._page()
this.$refs.pageTable._hideLoading()
break
}
},
_detailModal(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>
plugins/global.js
......@@ -13,6 +13,7 @@ import PTVXETableData from '../components/base/PTVXETableData'
import VXEIconList from '../components/base/VXEIconList'
import FileManage from '../components/file/file-manage/FileManage'
import VXESettingCol from '../components/base/VXESettingCol'
import ElTableNoPage from '../components/table/ElTableNoPage'
Vue.use(VXETable)
Vue.component('btn-list', btnList)
......@@ -24,3 +25,4 @@ Vue.component('PTVXETableData', PTVXETableData)
Vue.component('VXEIconList', VXEIconList)
Vue.component('VXESettingCol', VXESettingCol)
Vue.component('FileManage', FileManage)
Vue.component('ElTableNoPage', ElTableNoPage)
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