1 <template>
2 <div class="timeModel">
3 <div class="model_list" v-if="chainIdList !== ''">
4 <div class="top_list">
5 <h3>应收合同：<span>{{ receivableContract.name }} 合同编号：{{ receivableContract.number }}</span></h3>
6 <button @click="receivableClick">{{ buttonName }}</button>
7 </div>
8 <div class="echarts_list" v-if="receivableShow">
9 <div class="button_list">
10 <button class="list" :class="{isActive: buttonList}" @click="receivableSelectList">全部查看</button>
11 <button class="list" :class="{isActive: buttonList1}" @click="receivableSelectDzTime">单证时间</button>
12 <button class="list" :class="{isActive: buttonList2}" @click="receivableSelectJzTime">记账时间</button>
13 <button class="list" :class="{isActive: buttonList3}" @click="receivableSelectDfTime">多重数据</button>
14 <el-dialog :visible.sync="displayEcharts" :before-close="handleClose">
15 <div class="table_list">
16 <table v-for="(item, index) in dramData.timeList" :key="index">
17 <tr>
18 <th>合同</th>
19 <th v-if="item.dz_time">单证时间</th>
20 <th v-if="item.jz_time">记账时间</th>
21 <th>审核状态</th>
22 <th>确认状态</th>
23 </tr>
24 <tr>
25 <td>{{ item.name }}</td>
26 <td v-if="item.dz_time">{{ item.dz_time }}</td>
27 <td v-if="item.jz_time">{{ item.jz_time }}</td>
28 <td>{{ item.verified_status }}</td>
29 <td>{{ item.approved_status }}</td>
30 </tr>
31 </table>
32 </div>
33 </el-dialog>
34 </div>
35 <div id="receivableEcharts" height='700px' width="1300px"></div>
36 </div>
37 </div>
38 <div class="model_list1" v-if="chainIdList === ''">应收合同：暂无数据</div>
39 <div class="model_list" v-if="payableIdList !== ''">
40 <div class="top_list">
41 <h3>应付合同：<span>{{ payableContract.name }} 合同编号：{{ payableContract.number }}</span></h3>
42 <button @click="payableClick">{{ buttonNames }}</button>
43 </div>
44 <div class="echarts_list" v-if="payableShow">
45 <div class="button_list">
46 <button class="list" :class="{isActive: buttonList4}" @click="selectList">全部查看</button>
47 <button class="list" :class="{isActive: buttonList5}" @click="selectDzTime">单证时间</button>
48 <button class="list" :class="{isActive: buttonList6}" @click="selectJzTime">记账时间</button>
49 <button class="list" :class="{isActive: buttonList7}" @click="selectDfTime">多重数据</button>
50 <el-dialog :visible.sync="displayEcharts" :before-close="handleClose">
51 <div class="table_list">
52 <table v-for="(item, index) in dramsData.timeList" :key="index">
53 <tr>
54 <th>合同</th>
55 <th v-if="item.dz_time">单证时间</th>
56 <th v-if="item.jz_time">记账时间</th>
57 <th>审核状态</th>
58 <th>确认状态</th>
59 </tr>
60 <tr>
61 <td>{{ item.name }}</td>
62 <td v-if="item.dz_time">{{ item.dz_time }}</td>
63 <td v-if="item.jz_time">{{ item.jz_time }}</td>
64 <td>{{ item.verified_status }}</td>
65 <td>{{ item.approved_status }}</td>
66 </tr>
67 </table>
68 </div>
69 </el-dialog>
70 </div>
71 <div id="payableEcharts" height='700px' width="1300px"></div>
72 </div>
73 </div>
74 <div class="model_list1" v-if="payableIdList === ''">应付合同：暂无数据</div>
75 </div>
76 </template>
77 <script>
78 const echarts = require('echarts')
79 export default {
80 name: 'timeModel',
81 // 时间模型
82 data () {
83 return {
84 // 按钮
85 buttonName: '展开',
86 // 按钮
87 buttonNames: '展开',
88 // 应收
89 receivableShow: false,
90 // 应付
91 payableShow: false,
92 datas: '',
93 hours: '',
94 days: '',
95 num: '',
96 name: '',
97 docData: {},
98 data1: [],
99 form: '全部',
100 dramData: {
101 // 单证时间、记账时间、多重数据
102 timeList: [],
103 // 单证时间
104 documentaryTime: [],
105 // 记账时间
106 bookeepingTime: [],
107 // 重复数据
108 cfTimeList: [],
109 // 横坐标
110 xAxi: [],
111 // Y轴纵坐标
112 yAxi: [],
113 },
114 dramsData: {
115 // 单证时间、记账时间、多重数据
116 timeList: [],
117 // 单证时间
118 documentaryTime: [],
119 // 记账时间
120 bookeepingTime: [],
121 // 重复数据
122 cfTimeList: [],
123 // 横坐标
124 xAxi: [],
125 // Y轴纵坐标
126 yAxi: [],
127 },
128 // yAxiList: [
129 // {name: 'ContractSettlement', value: 'B2B合同结算'},
130 // {name: 'Payment', value: 'B2B支付'},
131 // {name: 'Invoice', value: 'B2B发票'},
132 // {name: 'Settlement', value: 'B2B结算'},
133 // {name: 'Acceptance', value: 'B2B验收入库单'},
134 // {name: 'Transport', value: 'B2B电子运单'},
135 // {name: 'Warehouse', value: 'B2B出货单'},
136 // {name: 'Order', value: 'B2B电子订单'},
137 // {name: 'FinancingPlan', value: '订单融资计划'},
138 // {name: 'TransportContract', value: '运输合同'},
139 // {name: 'WarehousingContract', value: '仓储合同'},
140 // {name: 'LedgerPlan', value: 'B2B采购订单计划'},
141 // {name: 'PlanDeposit', value: 'B2B应付订金'},
142 // {name: 'Contract', value: 'B2B采购合同'}
143 // ],
144 yAxiList: ['B2B合同结算', 'B2B支付', 'B2B发票', 'B2B结算', 'B2B验收入库单', 'B2B电子运单', 'B2B出货单', 'B2B电子订单',
145 '运输合同', '仓储合同', 'B2B采购订单计划', 'B2B应付订金', 'B2B采购合同'
146 ],
147 buttonList: true,
148 buttonList1: false,
149 buttonList2: false,
150 buttonList3: false,
151 buttonList4: true,
152 buttonList5: false,
153 buttonList6: false,
154 buttonList7: false,
155 // 弹框
156 displayEcharts: false,
157 chainId: '',
158 // 应收
159 chainIdList: '',
160 receivableContract: {
161 name: '',
162 number: ''
163 },
164 // 应付
165 payableIdList: '',
166 payableContract: {
167 name: '',
168 number: ''
169 },
170 docTimeData: ''
171 }
172 },
173 mounted () {
174 var that = this
175 if (that.$route.query.id) {
176 that.chainId = that.$route.query.id
177 } else {
178 that.is404 = 1
179 }
180 that.$ajax.get('/api/chain/ledger_log/?token=' + that.$token() + '&chain_id=' + that.chainId).then(res => {
181 if (res.data.code === '1') {
182 if (res.data.data.payable_contract.length !== 0) {
183 // 应付id
184 that.payableIdList = res.data.data.payable_contract[0].contract_role_record.id
185 // 应付
186 that.payableContract = res.data.data.payable_contract[0].contract_role_record
187 }
188 if (res.data.data.receivable_contract.length !== 0) {
189 // 应收id
190 that.chainIdList = res.data.data.receivable_contract[0].contract_role_record.id
191 // 应收
192 that.receivableContract = res.data.data.receivable_contract[0].contract_role_record
193 }
194 }
195 })
196 },
197 methods: {
198 // 应收合同
199 receivableClick () {
200 var that = this
201 if (that.buttonName === '展开') {
202 that.buttonName = '闭合'
203 that.receivableShow = true
204 that.$ajax.post('/api/chain/contract_scatter_diagram2/', {token: that.$token(), contract_id: that.chainIdList, unfold_list: []}).then(res => {
205 if (res.data.code === '1') {
206 that.docTimeData = res.data.data
207 // 单证时间
208 that.dramData.documentaryTime = that.docTimeData.dz_time_list
209 // 记账时间
210 that.dramData.bookeepingTime = that.docTimeData.jz_time_list
211 // 重复数据
212 that.dramData.cfTimeList = that.docTimeData.cf_time_list
213 // 横坐标
214 that.dramData.xAxi = that.docTimeData.date_list
215 // Y轴纵坐标
216 that.dramData.yAxi = that.docTimeData.name_list
217 // 标题
218 that.dramData.name = that.docTimeData.contract_name
219 // 回调
220 that.dramEchars('单证时间', '记账时间', '多重数据', that.dramData.name, that.dramData.xAxi, that.dramData.yAxi, that.dramData.documentaryTime, that.dramData.bookeepingTime, that.dramData.cfTimeList)
221 }
222 })
223 } else if (that.buttonName === '闭合') {
224 that.buttonName = '展开'
225 that.receivableShow = false
226 }
227 },
228 // 应付合同
229 payableClick () {
230 var that = this
231 if (that.buttonNames === '展开') {
232 that.buttonNames = '闭合'
233 that.payableShow = true
234 that.$ajax.post('/api/chain/contract_scatter_diagram2/', {token: that.$token(), contract_id: that.payableIdList, unfold_list: []}).then(res => {
235 if (res.data.code === '1') {
236 that.docTimeData = res.data.data
237 // 单证时间
238 that.dramsData.documentaryTime = that.docTimeData.dz_time_list
239 // 记账时间
240 that.dramsData.bookeepingTime = that.docTimeData.jz_time_list
241 // 重复数据
242 that.dramsData.cfTimeList = that.docTimeData.cf_time_list
243 // 横坐标
244 that.dramsData.xAxi = that.docTimeData.date_list
245 // Y轴纵坐标
246 that.dramsData.yAxi = that.docTimeData.name_list
247 // 标题
248 that.dramsData.name = that.docTimeData.contract_name
249 // 回调
250 that.dramEcharsPayable('单证时间', '记账时间', '多重数据', that.dramsData.name, that.dramsData.xAxi, that.dramsData.yAxi, that.dramsData.documentaryTime, that.dramsData.bookeepingTime, that.dramsData.cfTimeList)
251 }
252 })
253 } else if (that.buttonNames === '闭合') {
254 that.buttonNames = '展开'
255 that.payableShow = false
256 }
257 },
258 // 全部查看
259 receivableSelectList () {
260 var that = this
261 that.buttonList = true
262 that.buttonList1 = false
263 that.buttonList2 = false
264 that.buttonList3 = false
265 that.dramEchars('单证时间', '记账时间', '多重数据', that.dramData.name, that.dramData.xAxi, that.dramData.yAxi, that.dramData.documentaryTime, that.dramData.bookeepingTime, that.dramData.cfTimeList)
266 },
267 // 单证时间
268 receivableSelectDzTime () {
269 var that = this
270 that.buttonList = false
271 that.buttonList1 = true
272 that.buttonList2 = false
273 that.buttonList3 = false
274 that.dramEchars('单证时间', '', '', that.dramData.name, that.dramData.xAxi, that.dramData.yAxi, that.dramData.documentaryTime, [], [])
275 },
276 // 记账时间
277 receivableSelectJzTime () {
278 var that = this
279 that.dramEchars('', '记账时间', '', that.dramData.name, that.dramData.xAxi, that.dramData.yAxi, [], that.dramData.bookeepingTime, [])
280 that.buttonList = false
281 that.buttonList1 = false
282 that.buttonList2 = true
283 that.buttonList3 = false
284 },
285 // 多重数据
286 receivableSelectDfTime () {
287 var that = this
288 that.dramEchars('', '', '多重数据', that.dramData.name, that.dramData.xAxi, that.dramData.yAxi, [], [], that.dramData.cfTimeList)
289 that.buttonList = false
290 that.buttonList1 = false
291 that.buttonList2 = false
292 that.buttonList3 = true
293 },
294 // 应收动态传入数据
295 dramEchars: function (dataName, dataName1, dataName2, name, hours, days, data, data1, data2) {
296 var that = this
297 // dataName, dataName1, dataName2, name, hours, days, data, data1, data2
298 // 数据名称，数据名称1，数据名称2，标题名称，横坐标，纵坐标，数据，数据1，数据2
299 var receivableEcharts = document.getElementById('receivableEcharts')
300 var myChart = echarts.init(receivableEcharts)
301 if (data.length !== 0) {
302 data = data.map(function (item) {
303 return [item[0], item[1], item[2], item[3]]
304 })
305 data1 = data1.map(function (item) {
306 return [item[0], item[1], item[2], item[3]]
307 })
308 data2 = data2.map(function (item) {
309 return [item[0], item[1], item[2], item[3]]
310 })
311 }
312 var option = {
313 title: {
314 text: ''
315 },
316 legend: {
317 data: ['单证时间', '记账时间', '多重数据'],
318 left: 'right'
319 // height: receivableEcharts.style.height
320 },
321 tooltip: {
322 position: 'top',
323 enterable: true,
324 // trigger: 'axis',
325 axisPointer: {
326 type: 'cross',
327 label: {
328 backgroundColor: '#eb6100'
329 }
330 },
331 // 背景颜色
332 // backgroundColor: 'none',
333 // 圆点hover时显示的数据
334 formatter: function (params) {
335 var str = ''
336 if (params.seriesName === '单证时间') {
337 for (let i in params.value[3]) {
338 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
339 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '单证时间' + '</th>'
340 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
341 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
342 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].dz_time
343 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].verified_status
344 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; padding: 0 10px; border-top: none;">' + params.value[3][i].approved_status
345 str += '</td></tr></table>'
346 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin: 10px; line-height: 26px; padding: 5px 10px;">'
347 // str += '<div>' + params.value[3][i].name +'</div>'
348 // str += '<div>单证时间：' + params.value[3][i].dz_time +'</div>'
349 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
350 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
351 // str += '</div>'
352 }
353 } else if (params.seriesName === '记账时间') {
354 for (let i in params.value[3]) {
355 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
356 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '记账时间' + '</th>'
357 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
358 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
359 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].jz_time
360 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].verified_status
361 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; padding: 0 10px;">' + params.value[3][i].approved_status
362 str += '</td></tr></table>'
363 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin-top: 10px; line-height: 26px; padding: 5px 10px;">'
364 // str += '<div>' + params.value[3][i].name +'</div>'
365 // str += '<div>单证时间:' + params.value[3][i].jz_time +'</div>'
366 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
367 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
368 // str += '</div>'
369 }
370 } else if (params.seriesName === '多重数据') {
371 for (let i in params.value[3]) {
372 if (params.value[3][i].jz_time) {
373 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
374 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '记账时间' + '</th>'
375 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
376 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
377 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].jz_time
378 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].verified_status
379 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; padding: 0 10px; border-top: none;">' + params.value[3][i].approved_status
380 str += '</td></tr></table>'
381 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin-top: 10px; line-height: 26px; padding: 5px 10px;">'
382 // str += '<div>' + params.value[3][i].name +'</div>'
383 // str += '<div>单证时间：' + params.value[3][i].jz_time +'</div>'
384 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
385 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
386 // str += '</div>'
387 } else if (params.value[3][i].dz_time) {
388 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
389 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '单证时间' + '</th>'
390 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
391 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
392 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].dz_time
393 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].verified_status
394 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; padding: 0 10px; border-top: none;">' + params.value[3][i].approved_status
395 str += '</td></tr></table>'
396 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin-top: 10px; line-height: 26px; padding: 5px 10px;">'
397 // str += '<div>' + params.value[3][i].name +'</div>'
398 // str += '<div>单证时间：' + params.value[3][i].dz_time +'</div>'
399 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
400 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
401 // str += '</div>'
402 }
403 }
404 }
405 return str
406 }
407 },
408 grid: {
409 left: 2,
410 bottom: 10,
411 right: 10,
412 containLabel: true
413 },
414 color: ['#7460ee', '#66cd2e', 'rgb(30,144,255)'],
415 xAxis: {
416 type: 'category',
417 data: hours,
418 boundaryGap: false,
419 splitLine: {
420 show: true,
421 lineStyle: {
422 color: 'rgba(204,204,204,0.30)',
423 type: 'solid'
424 }
425 },
426 // 字体样式
427 axisLabel: {
428 show: true,
429 textStyle: {
430 color: '#333333'
431 }
432 },
433 axisLine: {
434 show: false,
435 lineStyle: {
436 color: 'rgba(204,204,204,0.30)',
437 type: 'solid'
438 }
439 }
440 },
441 yAxis: {
442 type: 'category',
443 data: days,
444 boundaryGap: false,
445 splitLine: {
446 show: true,
447 lineStyle: {
448 color: 'rgba(204,204,204,0.30)',
449 type: 'solid'
450 }
451 },
452 // 字体样式
453 axisLabel: {
454 show: true,
455 textStyle: {
456 color: '#333333',
457 fontWeight: 'bold'
458 },
459 // 让字体完全显示
460 interval: 0
461 },
462 axisLine: {
463 show: false,
464 lineStyle: {
465 color: 'rgba(204,204,204,0.30)',
466 type: 'solid'
467 }
468 },
469 // 点击事件
470 triggerEvent: true
471 },
472 series: [
473 {
474 name: dataName,
475 type: 'scatter',
476 hoverAnimation: false,
477 symbolSize: function (val) {
478 return val[2] * 2
479 },
480 color: ['#7460ee'],
481 data: data,
482 animationDelay: function (idx) {
483 return idx * 5
484 },
485 // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
486 emphasis: {
487 itemStyle: {
488 borderColor: 'rgba(116,96,238,0.30)',
489 borderWidth: 8,
490 areaStyle: {color: '#7460ee'}
491 }
492 },
493 // markArea: {
494 // silent: true,
495 // itemStyle: {
496 // normal: {
497 // color: 'transparent',
498 // borderWidth: 1,
499 // borderType: 'soild'
500 // }
501 // },
502 // data: [
503 // [
504 // {
505 // name: '颜色',
506 // xAxis: '2018-06-22',
507 // yAxis: 'B2B验收入库单'
508 // }
509 // ]
510 // ]
511 // },
512 // markLine: {
513 // lineStyle: {
514 // normal: {
515 // type: 'solid'
516 // }
517 // },
518 // data: [
519 // { yAxis: '2018-06-22' }
520 // ]
521 // }
522 },
523 {
524 name: dataName1,
525 type: 'scatter',
526 color: ['#66cd2e'],
527 hoverAnimation: false,
528 symbolSize: function (val) {
529 return val[2] * 2
530 },
531 data: data1,
532 animationDelay: function (idx) {
533 return idx * 5
534 },
535 // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
536 emphasis: {
537 itemStyle: {
538 borderColor: 'rgba(102,205,46,0.30)',
539 borderWidth: 8,
540 areaStyle: {color: '#66cd2e'}
541 }
542 }
543 },
544 {
545 name: dataName2,
546 type: 'scatter',
547 hoverAnimation: false,
548 symbolSize: function (val) {
549 return val[2] * 2
550 },
551 data: data2,
552 color: ['rgb(30,144,255)'],
553 animationDelay: function (idx) {
554 return idx * 5
555 },
556 emphasis: {
557 itemStyle: {
558 borderColor: 'rgb(30,144,255,0.30)',
559 borderWidth: 8,
560 areaStyle: {color: 'rgb(30,144,255)'}
561 }
562 }
563 }
564 ]
565 }
566 // 清除画布
567 myChart.clear()
568 myChart.setOption(option)
569 // 在渲染点击事件之前先清除点击事件
570 myChart.off('click')
571 myChart.on ('click', function (params) {
572 // 圆点的点击
573 if (params.componentType === 'series') {
574 that.displayEcharts = true
575 that.dramData.timeList = params.value[3]
576 // Y轴的点击、
577 } else if (params.componentType === 'yAxis') {
578 for (let i in that.yAxiList) {
579 if (that.yAxiList[i] === params.value) {
580 that.$ajax.post('/api/chain/contract_scatter_diagram2/', {token: that.$token(), contract_id: that.chainIdList, unfold_list: [params.value]}).then(res => {
581 if (res.data.code === '1') {
582 that.docTimeData = res.data.data
583 // 单证时间
584 that.dramData.documentaryTime = that.docTimeData.dz_time_list
585 // 记账时间
586 that.dramData.bookeepingTime = that.docTimeData.jz_time_list
587 // 重复数据
588 that.dramData.cfTimeList = that.docTimeData.cf_time_list
589 // 横坐标
590 that.dramData.xAxi = that.docTimeData.date_list
591 // Y轴纵坐标
592 that.dramData.yAxi = that.docTimeData.name_list
593 // 标题
594 that.dramData.name = that.docTimeData.contract_name
595 // 回调
596 that.dramEchars('单证时间', '记账时间', '多重数据', that.dramData.name, that.dramData.xAxi, that.dramData.yAxi, that.dramData.documentaryTime, that.dramData.bookeepingTime, that.dramData.cfTimeList)
597 }
598 })
599 }
600 }
601 }
602 })
603 },
604 // 应付动态传入数据
605 dramEcharsPayable: function (dataName, dataName1, dataName2, name, hours, days, data, data1, data2) {
606 var that = this
607 // dataName, dataName1, dataName2, name, hours, days, data, data1, data2
608 // 数据名称，数据名称1，数据名称2，标题名称，横坐标，纵坐标，数据，数据1，数据2
609 var payableEcharts = document.getElementById('payableEcharts')
610 var myCharts = echarts.init(payableEcharts)
611 if (data.length !== 0) {
612 data = data.map(function (item) {
613 return [item[0], item[1], item[2], item[3]]
614 })
615 data1 = data1.map(function (item) {
616 return [item[0], item[1], item[2], item[3]]
617 })
618 data2 = data2.map(function (item) {
619 return [item[0], item[1], item[2], item[3]]
620 })
621 }
622 var options = {
623 title: {
624 text: ''
625 },
626 legend: {
627 data: ['单证时间', '记账时间', '多重数据'],
628 left: 'right'
629 // height: receivableEcharts.style.height
630 },
631 tooltip: {
632 position: 'top',
633 enterable: true,
634 // trigger: 'axis',
635 axisPointer: {
636 type: 'cross',
637 label: {
638 backgroundColor: '#eb6100'
639 }
640 },
641 // 背景颜色
642 // backgroundColor: 'none',
643 // 圆点hover时显示的数据
644 formatter: function (params) {
645 var str = ''
646 if (params.seriesName === '单证时间') {
647 for (let i in params.value[3]) {
648 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
649 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '单证时间' + '</th>'
650 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
651 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
652 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].dz_time
653 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].verified_status
654 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; padding: 0 10px; border-top: none;">' + params.value[3][i].approved_status
655 str += '</td></tr></table>'
656 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin: 10px; line-height: 26px; padding: 5px 10px;">'
657 // str += '<div>' + params.value[3][i].name +'</div>'
658 // str += '<div>单证时间：' + params.value[3][i].dz_time +'</div>'
659 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
660 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
661 // str += '</div>'
662 }
663 } else if (params.seriesName === '记账时间') {
664 for (let i in params.value[3]) {
665 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
666 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '记账时间' + '</th>'
667 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
668 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
669 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].jz_time
670 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].verified_status
671 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; padding: 0 10px;">' + params.value[3][i].approved_status
672 str += '</td></tr></table>'
673 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin-top: 10px; line-height: 26px; padding: 5px 10px;">'
674 // str += '<div>' + params.value[3][i].name +'</div>'
675 // str += '<div>单证时间:' + params.value[3][i].jz_time +'</div>'
676 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
677 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
678 // str += '</div>'
679 }
680 } else if (params.seriesName === '多重数据') {
681 for (let i in params.value[3]) {
682 if (params.value[3][i].jz_time) {
683 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
684 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '记账时间' + '</th>'
685 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
686 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
687 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].jz_time
688 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].verified_status
689 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; padding: 0 10px; border-top: none;">' + params.value[3][i].approved_status
690 str += '</td></tr></table>'
691 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin-top: 10px; line-height: 26px; padding: 5px 10px;">'
692 // str += '<div>' + params.value[3][i].name +'</div>'
693 // str += '<div>单证时间：' + params.value[3][i].jz_time +'</div>'
694 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
695 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
696 // str += '</div>'
697 } else if (params.value[3][i].dz_time) {
698 str += '<table style="background: #fff; width: 620px; color: #333; margin-top: 10px; padding: 10px; text-align: center;">'
699 str += '<tr style="border: 1px solid #d4dbe0;border-top: none;"><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '合同' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '单证时间' + '</th>'
700 str += '<th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '审核状态' + '</th><th style="width: 150px;height: 40px;background-color: #e6e9ea;line-height: 40px;">' + '确认状态' + '</th></tr>'
701 str += '<tr style="padding-top: 15px;border: 1px solid #d4dbe0;"><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-top: none; border-right: none; padding: 0 10px;">' + params.value[3][i].name
702 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].dz_time
703 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; border-right: none; padding: 0 10px; border-top: none;">' + params.value[3][i].verified_status
704 str += '</td><td style="width: 150px; height: 40px; line-height: 40px; border: 1px solid #d4dbe0; padding: 0 10px; border-top: none;">' + params.value[3][i].approved_status
705 str += '</td></tr></table>'
706 // str += '<div style="background: rgba(0,0,0,0.70); border-radius: 4px; margin-top: 10px; line-height: 26px; padding: 5px 10px;">'
707 // str += '<div>' + params.value[3][i].name +'</div>'
708 // str += '<div>单证时间：' + params.value[3][i].dz_time +'</div>'
709 // str += '<div>审核状态：' + params.value[3][i].verified_status +'</div>'
710 // str += '<div>确认状态：' + params.value[3][i].approved_status +'</div>'
711 // str += '</div>'
712 }
713 }
714 }
715 return str
716 }
717 },
718 grid: {
719 left: 2,
720 bottom: 10,
721 right: 10,
722 containLabel: true
723 },
724 color: ['#7460ee', '#66cd2e', 'rgb(30,144,255)'],
725 xAxis: {
726 type: 'category',
727 data: hours,
728 boundaryGap: false,
729 splitLine: {
730 show: true,
731 lineStyle: {
732 color: 'rgba(204,204,204,0.30)',
733 type: 'solid'
734 }
735 },
736 // 字体样式
737 axisLabel: {
738 show: true,
739 textStyle: {
740 color: '#333333'
741 }
742 },
743 axisLine: {
744 show: false,
745 lineStyle: {
746 color: 'rgba(204,204,204,0.30)',
747 type: 'solid'
748 }
749 }
750 },
751 yAxis: {
752 type: 'category',
753 data: days,
754 boundaryGap: false,
755 splitLine: {
756 show: true,
757 lineStyle: {
758 color: 'rgba(204,204,204,0.30)',
759 type: 'solid'
760 }
761 },
762 // 字体样式
763 axisLabel: {
764 show: true,
765 textStyle: {
766 color: '#333333',
767 fontWeight: 'bold'
768 },
769 // 让字体完全显示
770 interval: 0
771 },
772 axisLine: {
773 show: false,
774 lineStyle: {
775 color: 'rgba(204,204,204,0.30)',
776 type: 'solid'
777 }
778 },
779 // 点击事件
780 triggerEvent: true
781 },
782 series: [
783 {
784 name: dataName,
785 type: 'scatter',
786 hoverAnimation: false,
787 symbolSize: function (val) {
788 return val[2] * 2
789 },
790 color: ['#7460ee'],
791 data: data,
792 animationDelay: function (idx) {
793 return idx * 5
794 },
795 // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
796 emphasis: {
797 itemStyle: {
798 borderColor: 'rgba(116,96,238,0.30)',
799 borderWidth: 8,
800 areaStyle: {color: '#7460ee'}
801 }
802 }
803 },
804 {
805 name: dataName1,
806 type: 'scatter',
807 color: ['#66cd2e'],
808 hoverAnimation: false,
809 symbolSize: function (val) {
810 return val[2] * 2
811 },
812 data: data1,
813 animationDelay: function (idx) {
814 return idx * 5
815 },
816 // emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
817 emphasis: {
818 itemStyle: {
819 borderColor: 'rgba(102,205,46,0.30)',
820 borderWidth: 8,
821 areaStyle: {color: '#66cd2e'}
822 }
823 }
824 },
825 {
826 name: dataName2,
827 type: 'scatter',
828 hoverAnimation: false,
829 symbolSize: function (val) {
830 return val[2] * 2
831 },
832 data: data2,
833 color: ['rgb(30,144,255)'],
834 animationDelay: function (idx) {
835 return idx * 5
836 },
837 emphasis: {
838 itemStyle: {
839 borderColor: 'rgb(30,144,255,0.30)',
840 borderWidth: 8,
841 areaStyle: {color: 'rgb(30,144,255)'}
842 }
843 }
844 }
845 ]
846 }
847 // 清除画布
848 myCharts.clear()
849 myCharts.setOption(options)
850 // 在渲染点击事件之前先清除点击事件
851 myCharts.off('click')
852 myCharts.on ('click', function (params) {
853 // 圆点的点击
854 if (params.componentType === 'series') {
855 that.displayEcharts = true
856 that.dramsData.timeList = params.value[3]
857 // Y轴的点击、
858 } else if (params.componentType === 'yAxis') {
859 for (let i in that.yAxiList) {
860 if (that.yAxiList[i] === params.value) {
861 that.$ajax.post('/api/chain/contract_scatter_diagram2/', {token: that.$token(), contract_id: that.payableIdList, unfold_list: [params.value]}).then(res => {
862 if (res.data.code === '1') {
863 that.docTimeData = res.data.data
864 // 单证时间
865 that.dramsData.documentaryTime = that.docTimeData.dz_time_list
866 // 记账时间
867 that.dramsData.bookeepingTime = that.docTimeData.jz_time_list
868 // 重复数据
869 that.dramsData.cfTimeList = that.docTimeData.cf_time_list
870 // 横坐标
871 that.dramsData.xAxi = that.docTimeData.date_list
872 // Y轴纵坐标
873 that.dramsData.yAxi = that.docTimeData.name_list
874 // 标题
875 that.dramsData.name = that.docTimeData.contract_name
876 // 回调
877 that.dramEcharsPayable('单证时间', '记账时间', '多重数据', that.dramsData.name, that.dramsData.xAxi, that.dramsData.yAxi, that.dramsData.documentaryTime, that.dramsData.bookeepingTime, that.dramsData.cfTimeList)
878 }
879 })
880 }
881 }
882 }
883 })
884 },
885 // 全部查看.dramsData
886 selectList () {
887 var that = this
888 that.buttonList4 = true
889 that.buttonList5 = false
890 that.buttonList6 = false
891 that.buttonList7 = false
892 that.dramEcharsPayable('单证时间', '记账时间', '多重数据', that.dramsData.name, that.dramsData.xAxi, that.dramsData.yAxi, that.dramsData.documentaryTime, that.dramsData.bookeepingTime, that.dramsData.cfTimeList)
893 },
894 // 单证时间
895 selectDzTime () {
896 var that = this
897 that.buttonList4 = false
898 that.buttonList5 = true
899 that.buttonList6 = false
900 that.buttonList7 = false
901 that.dramEcharsPayable('单证时间', '', '', that.dramsData.name, that.dramsData.xAxi, that.dramsData.yAxi, that.dramsData.documentaryTime, [], [])
902 },
903 // 记账时间
904 selectJzTime () {
905 var that = this
906 that.dramEcharsPayable('', '记账时间', '', that.dramsData.name, that.dramsData.xAxi, that.dramsData.yAxi, [], that.dramsData.bookeepingTime, [])
907 that.buttonList4 = false
908 that.buttonList5 = false
909 that.buttonList6 = true
910 that.buttonList7 = false
911 },
912 // 多重数据
913 selectDfTime () {
914 var that = this
915 that.dramEcharsPayable('', '', '多重数据', that.dramsData.name, that.dramsData.xAxi, that.dramsData.yAxi, [], [], that.dramsData.cfTimeList)
916 that.buttonList4 = false
917 that.buttonList5 = false.dramsData
918 that.buttonList6 = false
919 that.buttonList7 = true
920 },
921 // 关闭弹框
922 handleClose () {
923 var that = this
924 that.displayEcharts = false
925 }
926 }
927 }
928 </script>
929 <style lang="less" scoped>
930 .timeModel {
931 padding-bottom: 50px;
932 .model_list {
933 margin: 50px auto;
934 width: 1358px;
935 height: auto;
936 .top_list {
937 background:#fbfcfd;
938 border: 1px solid #cccccc;
939 border-radius: 2px 2px 0 0;
940 width: 1358px;
941 height: 50px;
942 display: flex;
943 flex-direction: row;
944 line-height: 50px;
945 h3 {
946 flex: 1;
947 font-family: Arial-BoldMT;
948 font-size: 14px;
949 color:#333333;
950 letter-spacing: 0;
951 text-align: left;
952 padding-left: 28px;
953 span {
954 font-family:ArialMT;
955 font-size:14px;
956 color:#666666;
957 letter-spacing:0;
958 text-align:left;
959 }
960 }
961 button {
962 background: none;
963 border: none;
964 outline: none;
965 font-family:PingFangSC-Regular;
966 font-size:12px;
967 color:#666666;
968 letter-spacing:0;
969 text-align:left;
970 padding-right: 58px;
971 }
972 }
973 .echarts_list {
974 background:#ffffff;
975 border: 1px solid #cccccc;
976 border-radius: 0 0 2px 2px;
977 width: 100%;
978 height: 800px;
979 border-top: none;
980 }
981 }
982 .model_list1 {
983 background:#fbfcfd;
984 border: 1px solid #cccccc;
985 border-radius: 2px 2px 0 0;
986 width: 1358px;
987 height: 50px;
988 margin: 0 auto;
989 line-height: 50px;
990 font-family: Arial-BoldMT;
991 font-size: 14px;
992 color:#333333;
993 letter-spacing: 0;
994 text-align: left;
995 padding-left: 28px;
996 }
997 #receivableEcharts {
998 margin: 0 auto;
999 width: 1300px;
1000 height: 700px;
1001 }
1002 #payableEcharts {
1003 margin: 0 auto;
1004 width: 1300px;
1005 height: 700px;
1006 }
1007 .container {
1008 margin: 0 auto;
1009 }
1010 div {
1011 .button_list {
1012 padding: 27px 0 20px 0;
1013 height: 89px;
1014 display: flex;
1015 flex-direction: row;
1016 .table_list {
1017 overflow-y: scroll;
1018 height: auto;
1019 max-height: 600px;
1020 padding-bottom: 30px;
1021 table {
1022 width: 100%;
1023 margin-top: 20px;
1024 tr {
1025 display: flex;
1026 border: 1px solid #d4dbe0;
1027 border-top: none;
1028 th {
1029 flex: 1;
1030 height: 40px;
1031 background-color: #e6e9ea;
1032 line-height: 40px;
1033 }
1034 td {
1035 text-align: center;
1036 flex: 1;
1037 height: 40px;
1038 line-height: 40px;
1039 border-right: 1px solid #d4dbe0;
1040 font-size: 12px;
1041 overflow: hidden;
1042 text-overflow: ellipsis;
1043 white-space: nowra;
1044 }
1045 td:last-child {
1046 border: none;
1047 }
1048 }
1049 }
1050 }
1051 .table_list::-webkit-scrollbar {
1052 width: 0;
1053 }
1054 }
1055 select {
1056 margin-left: 47px;
1057 background:#ffffff;
1058 border:1px solid #cccccc;
1059 border-radius:2px;
1060 width: 128px;
1061 height: 28px;
1062 line-height: 28px;
1063 padding: 0 16px;
1064 outline: none;
1065 border-radius: 5px;
1066 font-family: PingFangSC-Regular;
1067 font-size: 12px;
1068 color:#999999;
1069 letter-spacing: 0;
1070 text-align: left;
1071 }
1072 button {
1073 outline: none;
1074 font-family: PingFangSC-Regular;
1075 font-size: 12px;
1076 letter-spacing: 0;
1077 text-align: left;
1078 margin-left: 28px;
1079 }
1080 .list {
1081 border-radius: 2px;
1082 width: 84px;
1083 height: 28px;
1084 text-align: center;
1085 background:#ffffff;
1086 border: 1px solid #cccccc;
1087 border-radius: 2px;
1088 width: 84px;
1089 height: 28px;
1090 color:#999999;
1091 }
1092 .isActive {
1093 color:#ffffff;
1094 background:#eb6100;
1095 border: none;
1096 }
1097 }
1098 }
1099 </style>
