|
|
@ -1,81 +1,65 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="app-container"> |
|
|
<div class="app-container"> |
|
|
|
|
|
<!-- <div id="ehcarts_1" class="myEcharts"></div> --> |
|
|
<div id="ehcarts_1" class="myEcharts"></div> |
|
|
<div id="ehcarts_1" class="myEcharts"></div> |
|
|
<div> |
|
|
<div id="ehcarts_2" class="myEcharts"></div> |
|
|
<el-form :inline="true" :model="formSearch" ref="ruleForm" class="demo-form-inline"> |
|
|
<!-- <div class="fetch-block"> |
|
|
<el-form-item label="时间:"> |
|
|
<label>取码单编号：</label> |
|
|
<el-date-picker |
|
|
<p v-for="(item,index) in fetchList" :key="item.fetchId" @click="checkFetch(item,index)"> |
|
|
v-model="formSearch.time" |
|
|
<span :class="{ 'color-send': index == fetchIndex}">{{item.fetchId}}</span> |
|
|
size="mini" |
|
|
</p> |
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
</div> --> |
|
|
type="daterange" |
|
|
|
|
|
range-separator="至" |
|
|
<div v-show="isShowSend"> |
|
|
start-placeholder="开始日期" |
|
|
<el-table :data="sendList" style="width: 100%" header-row-class-name=""> |
|
|
end-placeholder="结束日期"> |
|
|
<el-table-column prop="sendTime" label="发码日期"></el-table-column> |
|
|
</el-date-picker> |
|
|
<el-table-column prop="sendCount" label="发码数"></el-table-column> |
|
|
</el-form-item> |
|
|
<el-table-column prop="sendRemainder" label="余码量"></el-table-column> |
|
|
<el-form-item> |
|
|
<el-table-column prop="receivedCount" label="取码数"></el-table-column> |
|
|
<el-button type="primary" size="mini" icon="el-icon-search" @click="search">查询</el-button> |
|
|
<!-- <el-table-column label="操作" width="200"> |
|
|
</el-form-item> |
|
|
<template slot-scope="scope"> |
|
|
</el-form> |
|
|
<el-button type="text" size="small" @click="showDetail(scope.row.id)"><i class="el-icon-edit"></i>查看</el-button> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-table-column> --> |
|
|
|
|
|
</el-table> |
|
|
|
|
|
<el-pagination |
|
|
|
|
|
background |
|
|
|
|
|
@size-change="handleSizeChange" |
|
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
|
:current-page="currentPage" |
|
|
|
|
|
:page-sizes="[10, 20, 50, 100]" |
|
|
|
|
|
:page-size="pageSize" |
|
|
|
|
|
layout="total, prev, pager, next, sizes, jumper" |
|
|
|
|
|
:total="sendTotal"> |
|
|
|
|
|
</el-pagination> |
|
|
</div> |
|
|
</div> |
|
|
<el-table :data="tableData" style="width: 100%" header-row-class-name=""> |
|
|
<div v-show="isShowFetch"> |
|
|
<el-table-column prop="time" label="日期"></el-table-column> |
|
|
<el-table :data="[fetchData]" style="width: 100%" header-row-class-name=""> |
|
|
<el-table-column prop="send_count" label="发码数"></el-table-column> |
|
|
<!-- <el-table-column prop="fetchId" label="取码单编号"></el-table-column> --> |
|
|
<el-table-column prop="fetch_count" label="领码数"></el-table-column> |
|
|
<el-table-column prop="fetchCount" label="取码数"></el-table-column> |
|
|
<el-table-column prop="discard_count" label="废码数"></el-table-column> |
|
|
<el-table-column prop="printCount" label="印制数"></el-table-column> |
|
|
<el-table-column prop="send_remainder" label="发码剩余"></el-table-column> |
|
|
<el-table-column prop="unPrintCount" label="未印制数"></el-table-column> |
|
|
<el-table-column label="操作" width="200"> |
|
|
<el-table-column prop="discardCount" label="废码数"></el-table-column> |
|
|
<template slot-scope="scope"> |
|
|
|
|
|
<el-button type="text" size="small" v-if="scope.row.type != 1" @click="showDetail(scope.row.real_id,scope.row.type)">查看</el-button> |
|
|
|
|
|
</template> |
|
|
|
|
|
</el-table-column> |
|
|
|
|
|
</el-table> |
|
|
|
|
|
<el-pagination |
|
|
|
|
|
background |
|
|
|
|
|
@size-change="handleSizeChange" |
|
|
|
|
|
@current-change="handleCurrentChange" |
|
|
|
|
|
:current-page="currentPage" |
|
|
|
|
|
:page-sizes="[10, 20, 50, 100]" |
|
|
|
|
|
:page-size="pageSize" |
|
|
|
|
|
layout="total, prev, pager, next, sizes, jumper" |
|
|
|
|
|
:total="total"> |
|
|
|
|
|
</el-pagination> |
|
|
|
|
|
<el-dialog title="查看" :visible.sync="dialogDetailVisible" width="750px"> |
|
|
|
|
|
<el-row class="font-size-16 line-height-2em"> |
|
|
|
|
|
<el-col :span="12"> |
|
|
|
|
|
<p>发码时间：{{sendDetail.sendTime}}</p> |
|
|
|
|
|
<p>发码数量:{{sendDetail.sendTotal}}</p> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
<el-col :span="12"> |
|
|
|
|
|
<p>取码总数:{{sendDetail.getTotal}}</p> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
<br> |
|
|
|
|
|
<el-table :data="tableData" style="width: 100%" header-row-class-name=""> |
|
|
|
|
|
<el-table-column prop="a" label="取码单号"></el-table-column> |
|
|
|
|
|
<el-table-column prop="b" label="取码数"></el-table-column> |
|
|
|
|
|
<el-table-column label="操作" width="200"> |
|
|
<el-table-column label="操作" width="200"> |
|
|
<template slot-scope="scope"> |
|
|
<template slot-scope="scope"> |
|
|
<el-button type="text" size="small" @click="showGetDetail(scope.row.id)"><i class="el-icon-edit"></i>查看</el-button> |
|
|
<el-button type="text" size="small" @click="showGetDetail(scope.row.fetchId)"><i class="el-icon-edit"></i>查看去向</el-button> |
|
|
</template> |
|
|
</template> |
|
|
</el-table-column> |
|
|
</el-table-column> |
|
|
</el-table> |
|
|
</el-table> |
|
|
<div slot="footer" class="dialog-footer"> |
|
|
</div> |
|
|
<el-button type="info" size="mini" @click="dialogDetailVisible = false">取消</el-button> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-dialog> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<script> |
|
|
<script> |
|
|
import { |
|
|
import { |
|
|
columnPortal,tablePortal |
|
|
columnPortal,tablePortal,summaryPortal,sumfetchpie |
|
|
} from "@/api/status" |
|
|
} from "@/api/status" |
|
|
|
|
|
import { |
|
|
|
|
|
getSendList |
|
|
|
|
|
} from "@/api/send" |
|
|
import * as echarts from 'echarts'; |
|
|
import * as echarts from 'echarts'; |
|
|
export default { |
|
|
export default { |
|
|
name: "sendStatus", |
|
|
name: "sendStatus", |
|
|
data() { |
|
|
data() { |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
formSearch: {//模糊搜索 |
|
|
formSearch: {//模糊搜索 |
|
|
time: '' |
|
|
time: '' |
|
|
@ -87,163 +71,360 @@ export default { |
|
|
}, |
|
|
}, |
|
|
dialogDetailVisible:false, |
|
|
dialogDetailVisible:false, |
|
|
ehcarts_1:null, |
|
|
ehcarts_1:null, |
|
|
|
|
|
ehcarts_2:null, |
|
|
currentPage: 1, //当前页 |
|
|
currentPage: 1, //当前页 |
|
|
pageSize: 10, //每页条数 |
|
|
pageSize: 10, //每页条数 |
|
|
total: 0, //总条数 |
|
|
sendTotal: 0, //总条数 |
|
|
tableData: [ |
|
|
tableData: [ |
|
|
], //表格数据 |
|
|
], //表格数据, |
|
|
|
|
|
totalData:{}, |
|
|
|
|
|
isShowSend:false, |
|
|
|
|
|
sendList:[], |
|
|
|
|
|
fetchData:[], |
|
|
|
|
|
// fetchList:[], |
|
|
|
|
|
fetchTable:[], |
|
|
|
|
|
// fetchIndex:0, |
|
|
|
|
|
isShowFetch:false |
|
|
}; |
|
|
}; |
|
|
}, |
|
|
}, |
|
|
mounted() { |
|
|
mounted() { |
|
|
this.initData() |
|
|
// this.initData() |
|
|
this.initEchartsData() |
|
|
this.initEchartsData() |
|
|
// this.setEcharts() |
|
|
this.initSendList() |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
//搜索查询 |
|
|
initSendList(){ |
|
|
search() { |
|
|
|
|
|
this.currentPage = 1 |
|
|
|
|
|
this.initData() |
|
|
|
|
|
}, |
|
|
|
|
|
//获取用户列表 |
|
|
|
|
|
initData() { |
|
|
|
|
|
const params = { |
|
|
const params = { |
|
|
pageNo: this.currentPage, |
|
|
pageNo: this.currentPage, |
|
|
pageSize: this.pageSize, |
|
|
pageSize: this.pageSize, |
|
|
startTime:this.formSearch.time?this.formSearch.time[0] : null, |
|
|
fetchStatus : 0, |
|
|
endTime:this.formSearch.time?this.formSearch.time[1] : null |
|
|
|
|
|
} |
|
|
} |
|
|
tablePortal(params).then(res => { |
|
|
getSendList(params).then(res => { |
|
|
this.tableData = res.data.list |
|
|
this.sendList = res.data.list |
|
|
this.total = res.data.count |
|
|
this.sendTotal = res.data.total |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
initEchartsData(){ |
|
|
initEchartsData(){ |
|
|
let myDate = new Date() |
|
|
//获取发码总数信息 |
|
|
var nowTime = myDate.toLocaleDateString() |
|
|
summaryPortal().then(res => { |
|
|
var nowTime = nowTime.split('/')[0] + (nowTime.split('/')[1].length > 1 ? nowTime.split('/')[1] : '0'+nowTime.split('/')[1]) |
|
|
if(res.data) { |
|
|
var beforeTime = new Date(myDate.setMonth(myDate.getMonth() - 11)).toLocaleDateString() |
|
|
this.totalData = res.data |
|
|
var beforeTime = beforeTime.split('/')[0] + (beforeTime.split('/')[1].length > 1 ?beforeTime.split('/')[1] : '0'+beforeTime.split('/')[1]) |
|
|
|
|
|
const params2 = { |
|
|
this.setEcharts1(this.totalData) |
|
|
start_month:beforeTime, |
|
|
this.ehcarts_1.on("click", param => { |
|
|
end_month:nowTime |
|
|
if(param.data) |
|
|
} |
|
|
{ |
|
|
columnPortal(params2).then(res => { |
|
|
this.isShowFetch = false |
|
|
let data = res.data |
|
|
this.isShowSend = true |
|
|
var xData = [] |
|
|
} |
|
|
var yData1 = [] |
|
|
}); |
|
|
var yData2 = [] |
|
|
|
|
|
var yData3 = [] |
|
|
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
|
|
const element = data[i]; |
|
|
|
|
|
xData.push(element.month) |
|
|
|
|
|
yData1.push(element.send_count) |
|
|
|
|
|
yData2.push(element.fetch_count) |
|
|
|
|
|
yData3.push(element.discard_count) |
|
|
|
|
|
} |
|
|
} |
|
|
this.setEcharts(xData,yData1,yData2,yData3) |
|
|
}) |
|
|
|
|
|
//获取取码单信息 |
|
|
|
|
|
sumfetchpie().then(res => { |
|
|
|
|
|
if(res.data) |
|
|
|
|
|
{ |
|
|
|
|
|
this.fetchData = res.data |
|
|
|
|
|
// this.fetchIndex = 0 |
|
|
|
|
|
// this.fetchList = res.data |
|
|
|
|
|
this.setEcharts2() |
|
|
|
|
|
this.ehcarts_2.on("click", param => { |
|
|
|
|
|
if(param.data) |
|
|
|
|
|
{ |
|
|
|
|
|
this.isShowSend = false |
|
|
|
|
|
this.isShowFetch = true |
|
|
|
|
|
// this.fetchTable = [] |
|
|
|
|
|
// this.fetchIndex = 0 |
|
|
|
|
|
// this.fetchTable = this.fetchList.slice(1) |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
}) |
|
|
}) |
|
|
}, |
|
|
}, |
|
|
//防伪码作废详情 |
|
|
//防伪码作废详情 |
|
|
|
|
|
|
|
|
showDetail(id,type) { |
|
|
// 查看取码详情 |
|
|
// this.dialogDetailVisible = true |
|
|
showGetDetail(id){ |
|
|
if(type == 2) { |
|
|
this.$router.push({name:'getAllDetail'}) |
|
|
this.$router.push({name:'statusGetDetail',query:{id:id}}) |
|
|
|
|
|
} else if (type == 3) { |
|
|
|
|
|
this.$router.push({name:'statusCancelDetail',query:{FMD_id:id}}) |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
}, |
|
|
//查看取码详情 |
|
|
//点击取码单 |
|
|
showGetDetail(){ |
|
|
checkFetch(item,index){ |
|
|
this.$router.push({name:'getDetail'}) |
|
|
this.isShowSend = false |
|
|
|
|
|
this.isShowFetch = true |
|
|
|
|
|
this.fetchTable = [] |
|
|
|
|
|
this.fetchIndex = index |
|
|
|
|
|
if(index == 0) |
|
|
|
|
|
{ |
|
|
|
|
|
this.fetchTable = this.fetchList.slice(1) |
|
|
|
|
|
} else { |
|
|
|
|
|
this.fetchTable.push(item) |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
setEcharts(xData,yData1,yData2,yData3){ |
|
|
setEcharts1(data){ |
|
|
|
|
|
let politicsFenBu_data = [ |
|
|
|
|
|
{ |
|
|
|
|
|
value: data.totalFetch, |
|
|
|
|
|
name: '取码量',// |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
{ |
|
|
|
|
|
value: data.sendRemainder, |
|
|
|
|
|
name: '余码量',//变动投资 |
|
|
|
|
|
} |
|
|
|
|
|
]; |
|
|
this.ehcarts_1 = echarts.init(document.getElementById("ehcarts_1")); |
|
|
this.ehcarts_1 = echarts.init(document.getElementById("ehcarts_1")); |
|
|
let option = { |
|
|
let option = { |
|
|
grid: { |
|
|
color: ['#ffda25', '#886eff', '#0cd2e6'], |
|
|
left:70, |
|
|
title: { |
|
|
bottom: 30, |
|
|
itemGap: 10, |
|
|
right: 15 |
|
|
text: '发码总数', |
|
|
}, |
|
|
subtext: data.totalSend, |
|
|
color:['rgb(84 112 198)','rgb(145 204 117)','rgb(238 102 102)'], |
|
|
left: '21%', |
|
|
legend: { |
|
|
top: '30%', |
|
|
data: ['发码', '取码', '作废'] |
|
|
textAlign: 'center', |
|
|
}, |
|
|
textStyle: { |
|
|
tooltip: { |
|
|
fontFamily: 'Arial', |
|
|
trigger: "item", |
|
|
fontWeight: '400', |
|
|
formatter: "{a} <br/>{b}: {c}" |
|
|
fontSize: 18, |
|
|
}, |
|
|
color: '#3e347b', |
|
|
xAxis: { |
|
|
backgroundColor:'#ff3300', |
|
|
type: "category", |
|
|
}, |
|
|
data: xData, |
|
|
|
|
|
axisLabel: { |
|
|
subtextStyle: { |
|
|
interval: 1 |
|
|
fontWeight: '400', |
|
|
// rotate:45 |
|
|
// fontSize: 18, |
|
|
} |
|
|
color: '#3e347b', |
|
|
}, |
|
|
fontSize: '20', |
|
|
yAxis: { |
|
|
fontWeight: 'bold', |
|
|
type: "value", |
|
|
backgroundColor: 'rgba(56,89,255,0.2)', |
|
|
splitLine: { |
|
|
borderColor: 'rgba(255,255,255,1)', |
|
|
show: false |
|
|
borderWidth: 10, |
|
|
} |
|
|
padding: [6, 6, 6, 6], |
|
|
}, |
|
|
shadowColor: 'rgba(56,211,255,1)', |
|
|
series: [ |
|
|
shadowBlur: 3, |
|
|
{ |
|
|
borderRadius: 3, |
|
|
name: "发码", |
|
|
}, |
|
|
type: "bar", |
|
|
}, |
|
|
label: { |
|
|
tooltip: { |
|
|
normal: { |
|
|
trigger: 'item', |
|
|
show: true, |
|
|
formatter: '{a} <br/>{b} : {c}', |
|
|
fontSize: 14, |
|
|
backgroundColor: 'rgba(0,0,0,0.6)', |
|
|
fontWeight: "bold", |
|
|
borderColor: 'rgba(0,0,0,0)', |
|
|
position: "top" |
|
|
padding: 10, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: '#fff', |
|
|
|
|
|
fontSize: 14, |
|
|
|
|
|
fontWeight: '300', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
itemGap: 10, |
|
|
|
|
|
icon: 'circle', |
|
|
|
|
|
type: 'scroll', |
|
|
|
|
|
orient: 'vertical', |
|
|
|
|
|
left: 60, |
|
|
|
|
|
top: '50%', |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: '#77899c', |
|
|
|
|
|
rich: { |
|
|
|
|
|
a: { |
|
|
|
|
|
color: '#999', |
|
|
|
|
|
width: 100, |
|
|
|
|
|
}, |
|
|
|
|
|
b: { |
|
|
|
|
|
color: '#23c3ff', |
|
|
|
|
|
width: 60, |
|
|
|
|
|
align: 'right', |
|
|
|
|
|
}, |
|
|
|
|
|
c: { |
|
|
|
|
|
color: '#777777', |
|
|
|
|
|
width: 100, |
|
|
|
|
|
align: 'left', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
formatter: function (name) { |
|
|
|
|
|
let target; |
|
|
|
|
|
for (let i = 0; i < politicsFenBu_data.length; i++) { |
|
|
|
|
|
if (politicsFenBu_data[i].name == name) { |
|
|
|
|
|
target = politicsFenBu_data[i].value; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
return `{a|${name}（占比）}{b|${((target / data.totalSend) * 100).toFixed(2) + '%'}}`; |
|
|
}, |
|
|
}, |
|
|
data: yData1 |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
series: [ |
|
|
name: "取码", |
|
|
{ |
|
|
type: "bar", |
|
|
itemStyle: { |
|
|
label: { |
|
|
borderWidth: 2, //设置border的宽度有多大 |
|
|
normal: { |
|
|
borderColor: 'rgba(0,0,0,0.2)', |
|
|
|
|
|
}, |
|
|
|
|
|
smooth: true, |
|
|
|
|
|
center: ['62%', '50%'], |
|
|
|
|
|
name: '', |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: ['10%', '50%'], |
|
|
|
|
|
avoidLabelOverlap: false, |
|
|
|
|
|
label: { |
|
|
show: true, |
|
|
show: true, |
|
|
fontSize: 14, |
|
|
formatter: '{b} : {c}', |
|
|
fontWeight: "bold", |
|
|
position: 'top', |
|
|
position: "top" |
|
|
}, |
|
|
|
|
|
emphasis: { |
|
|
|
|
|
label: { |
|
|
|
|
|
formatter: '', |
|
|
|
|
|
show: true, |
|
|
|
|
|
fontSize: '40', |
|
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: politicsFenBu_data, |
|
|
|
|
|
}, |
|
|
|
|
|
], |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
this.ehcarts_1.setOption(option); |
|
|
|
|
|
}, |
|
|
|
|
|
setEcharts2(){ |
|
|
|
|
|
let data = this.fetchData |
|
|
|
|
|
let politicsFenBu_data = [ |
|
|
|
|
|
{ |
|
|
|
|
|
value: data.printCount, |
|
|
|
|
|
name: '印刷量',// |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: data.unPrintCount, |
|
|
|
|
|
name: '未印制量',//变动投资 |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
value: data.discardCount, |
|
|
|
|
|
name: '废码量',//变动投资 |
|
|
|
|
|
} |
|
|
|
|
|
]; |
|
|
|
|
|
this.ehcarts_2 = echarts.init(document.getElementById("ehcarts_2")); |
|
|
|
|
|
let option = { |
|
|
|
|
|
color: ['#ffda25', '#886eff', '#0cd2e6'], |
|
|
|
|
|
title: { |
|
|
|
|
|
itemGap: 10, |
|
|
|
|
|
text: '取码数', |
|
|
|
|
|
subtext: data.fetchCount, |
|
|
|
|
|
left: '21%', |
|
|
|
|
|
top: '30%', |
|
|
|
|
|
textAlign: 'center', |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
fontFamily: 'Arial', |
|
|
|
|
|
fontWeight: '400', |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
color: '#3e347b', |
|
|
|
|
|
backgroundColor:'#ff3300', |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
subtextStyle: { |
|
|
|
|
|
fontWeight: '400', |
|
|
|
|
|
fontSize: 18, |
|
|
|
|
|
color: '#3e347b', |
|
|
|
|
|
fontSize: '20', |
|
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
|
backgroundColor: 'rgba(56,89,255,0.2)', |
|
|
|
|
|
borderColor: 'rgba(255,255,255,1)', |
|
|
|
|
|
borderWidth: 10, |
|
|
|
|
|
padding: [6, 6, 6, 6], |
|
|
|
|
|
shadowColor: 'rgba(56,211,255,1)', |
|
|
|
|
|
shadowBlur: 3, |
|
|
|
|
|
borderRadius: 3, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
tooltip: { |
|
|
|
|
|
trigger: 'item', |
|
|
|
|
|
formatter: '{a} <br/>{b} : {c}元', |
|
|
|
|
|
backgroundColor: 'rgba(0,0,0,0.6)', |
|
|
|
|
|
borderColor: 'rgba(0,0,0,0)', |
|
|
|
|
|
padding: 10, |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: '#fff', |
|
|
|
|
|
fontSize: 14, |
|
|
|
|
|
fontWeight: '300', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
legend: { |
|
|
|
|
|
itemGap: 10, |
|
|
|
|
|
icon: 'circle', |
|
|
|
|
|
type: 'scroll', |
|
|
|
|
|
orient: 'vertical', |
|
|
|
|
|
left: 60, |
|
|
|
|
|
top: '50%', |
|
|
|
|
|
textStyle: { |
|
|
|
|
|
color: '#77899c', |
|
|
|
|
|
rich: { |
|
|
|
|
|
a: { |
|
|
|
|
|
color: '#999', |
|
|
|
|
|
width: 100, |
|
|
|
|
|
}, |
|
|
|
|
|
b: { |
|
|
|
|
|
color: '#23c3ff', |
|
|
|
|
|
width: 60, |
|
|
|
|
|
align: 'right', |
|
|
|
|
|
}, |
|
|
|
|
|
c: { |
|
|
|
|
|
color: '#777777', |
|
|
|
|
|
width: 100, |
|
|
|
|
|
align: 'left', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
formatter: function (name) { |
|
|
|
|
|
let target; |
|
|
|
|
|
for (let i = 0; i < politicsFenBu_data.length; i++) { |
|
|
|
|
|
if (politicsFenBu_data[i].name == name) { |
|
|
|
|
|
target = politicsFenBu_data[i].value; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
return `{a|${name}（占比）}{b|${((target / data.fetchCount) * 100).toFixed(2) + '%'}}`; |
|
|
}, |
|
|
}, |
|
|
data: yData2 |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
series: [ |
|
|
name: "作废", |
|
|
{ |
|
|
type: "bar", |
|
|
itemStyle: { |
|
|
label: { |
|
|
borderWidth: 2, //设置border的宽度有多大 |
|
|
normal: { |
|
|
borderColor: 'rgba(0,0,0,0.2)', |
|
|
|
|
|
}, |
|
|
|
|
|
smooth: true, |
|
|
|
|
|
center: ['62%', '50%'], |
|
|
|
|
|
name: '', |
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
radius: ['10%', '50%'], |
|
|
|
|
|
avoidLabelOverlap: false, |
|
|
|
|
|
label: { |
|
|
show: true, |
|
|
show: true, |
|
|
fontSize: 14, |
|
|
formatter: '{b} : {c}', |
|
|
fontWeight: "bold", |
|
|
position: 'top', |
|
|
position: "top" |
|
|
}, |
|
|
} |
|
|
emphasis: { |
|
|
|
|
|
label: { |
|
|
|
|
|
formatter: '', |
|
|
|
|
|
show: true, |
|
|
|
|
|
fontSize: '40', |
|
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
|
}, |
|
|
|
|
|
}, |
|
|
|
|
|
data: politicsFenBu_data, |
|
|
}, |
|
|
}, |
|
|
data: yData3 |
|
|
], |
|
|
} |
|
|
}; |
|
|
] |
|
|
|
|
|
} |
|
|
this.ehcarts_2.setOption(option); |
|
|
this.ehcarts_1.setOption(option); |
|
|
|
|
|
}, |
|
|
}, |
|
|
//每页条数变化 |
|
|
//每页条数变化 |
|
|
handleSizeChange(val) { |
|
|
handleSizeChange(val) { |
|
|
this.pageSize = val |
|
|
this.pageSize = val |
|
|
this.initData() |
|
|
this.initSendList() |
|
|
}, |
|
|
}, |
|
|
//当前页变化 |
|
|
//当前页变化 |
|
|
handleCurrentChange(val) { |
|
|
handleCurrentChange(val) { |
|
|
this.currentPage = val |
|
|
this.currentPage = val |
|
|
this.initData() |
|
|
this.initSendList() |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}; |
|
|
}; |
|
|
</script> |
|
|
</script> |
|
|
@ -258,8 +439,27 @@ export default { |
|
|
} |
|
|
} |
|
|
.myEcharts { |
|
|
.myEcharts { |
|
|
position: relative; |
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
height: 300px; |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
// margin: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
.fetch-block { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 200px; |
|
|
height: 300px; |
|
|
height: 300px; |
|
|
width: calc(100% - 100px); |
|
|
overflow: hidden; |
|
|
margin: 50px; |
|
|
padding: 20px 0; |
|
|
|
|
|
p { |
|
|
|
|
|
line-height: 25px; |
|
|
|
|
|
color: darkgray; |
|
|
|
|
|
font-size: 15px; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
&:hover { |
|
|
|
|
|
color: #4395ff; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|
DESKTOP-00SUCB6\Administrator
4 years ago