| | |
| | | <!DOCTYPE html> |
| | | <html lang="en"> |
| | | |
| | | <head> |
| | | <meta charset="UTF-8" /> |
| | | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| | |
| | | <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" /> |
| | | <script src="/ai_html/views/demo/js/echarts.min.js"></script> |
| | | <script src="/ai_html/views/demo/js/index.full.js"></script> |
| | | <script src="/ai_html/views/demo/js/customInstruction.js"></script> |
| | | <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" /> |
| | | <style type="text/css"> |
| | | .item_title { |
| | |
| | | <div class="w-[50%] h-[70px]" v-for=" (item, index) in state.dataList" :key="index"> |
| | | <div class="h-[50%] pl-[10px] flex justify-start flex-wrap items-center"> |
| | | <i class="iconfont text-[#1c86ff] text-[20px]" :class="'icon-'+[state.iconFontArr[index]]"></i> |
| | | <span class="w-[80%] h-[30px] leading-7"> {{ item.number }} <span |
| | | class="text-[#a4aec5] text-[13px] ">个</span> </span> |
| | | |
| | | <span class="w-[80%] h-[30px] leading-7"> {{ item.number }} <span class="text-[#a4aec5] text-[13px]">个</span> </span> |
| | | </div> |
| | | <div class="h-[50%] flex items-center"> |
| | | <span class="text-[#707c97] text-[13px] ml-[10px]"> {{ item.text }} </span> |
| | | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class=" bg-[rgb(242,244,248)]"> |
| | | <div class="bg-[rgb(242,244,248)]" v-resize="chartContainerResize"> |
| | | <div class="w-full h-[370px] bg-[#fff]" id="UnionPayChart"></div> |
| | | </div> |
| | | <el-table :data="state.leaderBoardList" class=""> |
| | |
| | | Amount: '5478786', |
| | | NewRecord: '2024-01-01', |
| | | CompanyName: '张三', |
| | | }], |
| | | }, |
| | | ], |
| | | iconFontArr: ['putong', 'zhongduancanshuchaxun', 'biaodan', 'yunxiazai_o'], |
| | | }); |
| | | const initUnionPayEChart = () => { |
| | |
| | | option && myChart.setOption(option); |
| | | }; |
| | | onMounted(() => { |
| | | window.parent.addEventListener('resize', () => { |
| | | myChartRef.value.resize(); |
| | | }); |
| | | initUnionPayEChart(); |
| | | }); |
| | | return { state } |
| | | const chartContainerResize = ({ width, height }) => { |
| | | myChartRef.value.resize(); |
| | | }; |
| | | return { state, chartContainerResize }; |
| | | }, |
| | | }) |
| | | }); |
| | | App.use(ElementPlus); |
| | | elementResizeDirective(App); |
| | | App.mount('#unionPay'); |
| | | </script> |
| | | |
| | | </html> |