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
---
src/views/project/ch/demo/UnionPay.html | 304 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 199 insertions(+), 105 deletions(-)
diff --git a/src/views/project/ch/demo/UnionPay.html b/src/views/project/ch/demo/UnionPay.html
index 6ea1795..9441265 100644
--- a/src/views/project/ch/demo/UnionPay.html
+++ b/src/views/project/ch/demo/UnionPay.html
@@ -1,118 +1,212 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>绫诲瀷鍒嗗竷</title>
- <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
- <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
- <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
- <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
- <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
- </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>
+<head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>绫诲瀷鍒嗗竷</title>
+ <script src="/customer_list/ch/ai_html/views/demo/js/tailwind.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/vue.global.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <link href="/customer_list/ch/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('/customer_list/ch/static/images/demo/leader_left.png');
+ }
+
+ .leader_right {
+ width: 58px;
+ height: 14px;
+ background-image: url('/customer_list/ch/static/images/demo/leader_right.png');
+ transform: rotate(180deg);
+ }
+ </style>
+</head>
+
+<body>
+ <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="data-item-bottom flex-c">
- <span class="data-item-title"> {{ item.text }} </span>
- <span class="data-item-unit">(杈�)</span>
+ <div class="h-[50%] flex items-center">
+ <span class="text-[#707c97] text-[13px] ml-[10px]"> {{ item.text }} </span>
+
</div>
</div>
</div>
- <div class="mx-[5px] my-[5px] space-y-1 bg-[rgb(242,244,248)]">
- <div class="w-full h-[370px] bg-[#fff]" id="UnionPayChart"></div>
- </div>
</div>
- </body>
- <script>
- const { createApp, onMounted, ref, reactive } = Vue;
- createApp({
- setup() {
- const state = reactive({
- dataList: [
+
+ <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;
+ const App = createApp({
+ setup() {
+ const myChartRef = ref(null);
+ const state = reactive({
+ dataList: [
+ {
+ number: 1232233,
+ text: '骞村害宸叉妱鏁�',
+ },
+ {
+ number: 0,
+ text: '鏄ㄦ棩宸叉妱鏁�',
+ },
+ {
+ number: 23442,
+ text: '鏈堝害宸叉妱鏁�',
+ },
+ {
+ number: 152234,
+ text: '浠婃棩宸叉妱鏁�',
+ },
+ ],
+ 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,
+ // },
+ // x: 'center',
+ // // y: 'center',
+ // },
+ dataset: {
+ source: [
+ ['score', 'amount', 'product'],
+ [89.3, 58212, '绁ㄦ嵁鎵撳嵃鍐叉'],
+ [57.1, 78254, '绁ㄦ嵁鎵撳嵃'],
+ [74.4, 41032, '鍙樻洿濮旀墭鍐叉'],
+ [50.1, 12755, '鍙樻洿濮旀墭'],
+ [89.7, 20145, '鍙栨秷濮旀墭'],
+ [68.1, 79146, '濮旀墭'],
+ [19.6, 91852, '缂磋垂鍐叉'],
+ [10.6, 101852, '缂磋垂'],
+ [32.7, 20112, '鏌ヨ'],
+ ],
+ },
+ grid: { containLabel: true },
+ xAxis: {
+ // name: 'amount'
+ },
+ yAxis: { type: 'category' },
+ // visualMap: {
+ // orient: 'horizontal',
+ // left: 'center',
+ // min: 10,
+ // max: 100,
+ // text: ['High Score', 'Low Score'],
+ // // Map the score column to color
+ // dimension: 0,
+ // inRange: {
+ // color: ['#65B581', '#FFCE34', '#FD665F']
+ // }
+ // },
+ series: [
{
- number: 3250,
- text: '浠婃棩閿�閲�',
- },
- {
- number: 11122,
- text: '鏈懆閿�閲�',
- },
- {
- number: 36788,
- text: '鏈湀閿�閲�',
- },
- {
- number: 152234,
- text: '鏈搴﹂攢閲�',
+ type: 'bar',
+ encode: {
+ // Map the "amount" column to X axis.
+ x: 'amount',
+ // Map the "product" column to Y axis
+ y: 'product',
+ },
},
],
- iconFontArr: ['diagnose', 'monitoring', 'cloudupload', 'clouddownload'],
- });
- const initUnionPayEChart = () => {
- const chartDom = document.getElementById('UnionPayChart');
- const myChart = echarts.init(chartDom);
- var option = {
- title: {
- text: '閾惰仈缂磋垂绫诲瀷鍗犳瘮',
- textStyle: {
- fontSize: 13,
- },
- },
- dataset: {
- source: [
- ['score', 'amount', 'product'],
- [89.3, 58212, '绁ㄦ嵁鎵撳嵃鍐叉'],
- [57.1, 78254, '绁ㄦ嵁鎵撳嵃'],
- [74.4, 41032, '鍙樻洿濮旀墭鍐叉'],
- [50.1, 12755, '鍙樻洿濮旀墭'],
- [89.7, 20145, '鍙栨秷濮旀墭'],
- [68.1, 79146, '濮旀墭'],
- [19.6, 91852, '缂磋垂鍐叉'],
- [10.6, 101852, '缂磋垂'],
- [32.7, 20112, '鏌ヨ'],
- ],
- },
- grid: { containLabel: true },
- xAxis: {
- // name: 'amount'
- },
- yAxis: { type: 'category' },
- // visualMap: {
- // orient: 'horizontal',
- // left: 'center',
- // min: 10,
- // max: 100,
- // text: ['High Score', 'Low Score'],
- // // Map the score column to color
- // dimension: 0,
- // inRange: {
- // color: ['#65B581', '#FFCE34', '#FD665F']
- // }
- // },
- series: [
- {
- type: 'bar',
- encode: {
- // Map the "amount" column to X axis.
- x: 'amount',
- // Map the "product" column to Y axis
- y: 'product',
- },
- },
- ],
- };
- option && myChart.setOption(option);
};
- onMounted(() => {
- initUnionPayEChart();
+ option && myChart.setOption(option);
+ };
+ onMounted(() => {
+ window.addEventListener('resize', () => {
+ myChartRef.value.resize();
});
- },
- }).mount('#unionPay');
- </script>
-</html>
+ initUnionPayEChart();
+ });
+ return { state }
+ },
+ })
+ App.use(ElementPlus);
+ App.mount('#unionPay');
+</script>
+
+</html>
\ No newline at end of file
--
Gitblit v1.9.3