From 98f7aeb8c7a8e80c6b639a11d097944ad66effcc Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 17 七月 2024 18:05:37 +0800
Subject: [PATCH] Merge branch 'master' of http://47.103.154.90:83/r/WI/Web.V1.0
---
customer_list/ch/ai_html/views/demo/html/UnionPay.html | 144 +++++++++++++++++++++++++++++++++++++++--------
1 files changed, 118 insertions(+), 26 deletions(-)
diff --git a/customer_list/ch/ai_html/views/demo/html/UnionPay.html b/customer_list/ch/ai_html/views/demo/html/UnionPay.html
index b4290f8..935c61b 100644
--- a/customer_list/ch/ai_html/views/demo/html/UnionPay.html
+++ b/customer_list/ch/ai_html/views/demo/html/UnionPay.html
@@ -10,61 +10,147 @@
<script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
<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>
+ <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <style type="text/css">
+ .item_title {
+ height: 38px;
+ line-height: 38px;
+ width: 100%;
+ color: #31abe3;
+ text-align: center;
+ position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .leader_left {
+ width: 58px;
+ height: 14px;
+ background-image: url('/static/images/demo/leader_left.png');
+ }
+
+ .leader_right {
+ width: 58px;
+ height: 14px;
+ background-image: url('/static/images/demo/leader_right.png');
+ transform: rotate(180deg);
+ }
+ </style>
</head>
<body>
- <div class="w-full h-full bg-[#f2f4f8]" id="unionPay">
- <div class="w-full h-[40px] space-x-2 bg-[rgb(242,244,248)] flex justify-between items-center px-[10px]">
- <div class="data-item" v-for="(item, index) in state.dataList" :key="index">
- <div class="data-item-top flex-l">
- <i class="iconfont" :class="'icon-'+[state.iconFontArr[index]]"></i>
- </div>
- <div class="data-item-bottom flex-c">
- <span class="data-item-title"> {{ item.text }} </span>
- <span class="data-item-unit">(杈�)</span>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px] space-y-1" id="unionPay">
+ <div class="bg-[#fff]">
+ <div class="item_title">
+ <div class="leader_left"></div>
+ <span>閾惰仈缂磋垂绫诲瀷鍗犳瘮</span>
+ <div class="leader_right"></div>
+ </div>
+ <div class="w-full h-full flex justify-start items-center mt-4">
+ <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>
+
+ </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="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
+
+ <div class=" bg-[rgb(242,244,248)]">
<div class="w-full h-[370px] bg-[#fff]" id="UnionPayChart"></div>
</div>
+ <el-table :data="state.leaderBoardList" class="">
+ <el-table-column prop="Amount" label="鐢ㄦ埛鍙�" width="180" align="left"></el-table-column>
+ <el-table-column prop="Name" label="琛ㄥ彿" width="180" align="center"></el-table-column>
+ <el-table-column prop="CompanyName" label="鎶勮〃鍛�" align="center"></el-table-column>
+ <el-table-column prop="NewRecord" label="鎶勮〃鏃堕棿" align="center"></el-table-column>
+ </el-table>
</div>
</body>
<script>
const { createApp, onMounted, ref, reactive } = Vue;
- createApp({
+ const App = createApp({
setup() {
+ const myChartRef = ref(null);
const state = reactive({
dataList: [
{
- number: 3250,
- text: '浠婃棩閿�閲�',
+ number: 1232233,
+ text: '骞村害宸叉妱鏁�',
},
{
- number: 11122,
- text: '鏈懆閿�閲�',
+ number: 0,
+ text: '鏄ㄦ棩宸叉妱鏁�',
},
{
- number: 36788,
- text: '鏈湀閿�閲�',
+ number: 23442,
+ text: '鏈堝害宸叉妱鏁�',
},
{
number: 152234,
- text: '鏈搴﹂攢閲�',
+ text: '浠婃棩宸叉妱鏁�',
},
],
- iconFontArr: ['diagnose', 'monitoring', 'cloudupload', 'clouddownload'],
+ leaderBoardList: [
+ {
+ Name: 'Z2342N678',
+ Amount: '10000',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: 'Z2142B678',
+ Amount: '4354363',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: 'Z2322N678',
+ Amount: '435233',
+ NewRecord: '2024-01-01',
+ CompanyName: '鏉庡洓',
+ },
+ {
+ Name: 'Z2342N678',
+ Amount: '54545',
+ NewRecord: '2024-01-01',
+ CompanyName: '鐜嬩簩',
+ },
+ {
+ Name: 'Z1342C678',
+ Amount: '577887',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: 'Z7342N678',
+ Amount: '5478786',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ }],
+ iconFontArr: ['putong', 'zhongduancanshuchaxun', 'biaodan', 'yunxiazai_o'],
});
const initUnionPayEChart = () => {
const chartDom = document.getElementById('UnionPayChart');
const myChart = echarts.init(chartDom);
+ myChartRef.value = myChart;
var option = {
- title: {
- text: '閾惰仈缂磋垂绫诲瀷鍗犳瘮',
- textStyle: {
- fontSize: 13,
- },
- },
+ // title: {
+ // text: '閾惰仈缂磋垂绫诲瀷鍗犳瘮',
+ // textStyle: {
+ // fontSize: 13,
+ // },
+ // x: 'center',
+ // // y: 'center',
+ // },
dataset: {
source: [
['score', 'amount', 'product'],
@@ -111,10 +197,16 @@
option && myChart.setOption(option);
};
onMounted(() => {
+ window.addEventListener('resize', () => {
+ myChartRef.value.resize();
+ });
initUnionPayEChart();
});
+ return { state }
},
- }).mount('#unionPay');
+ })
+ App.use(ElementPlus);
+ App.mount('#unionPay');
</script>
</html>
\ No newline at end of file
--
Gitblit v1.9.3