From 8a785ef114cbd02850e0b9f9e49933d6504d75e5 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 27 十一月 2024 10:58:06 +0800
Subject: [PATCH] 提交配置文件
---
customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html | 355 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 182 insertions(+), 173 deletions(-)
diff --git a/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html b/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
index 6c66724..d8f67ec 100644
--- a/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
+++ b/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
@@ -1,190 +1,199 @@
<!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="/ai_html/views/demo/js/tailwind.js"></script>
+ <script src="/ai_html/views/demo/js/vue.global.js"></script>
+ <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/ai_html/views/demo/js/customInstruction.js"></script>
+ <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/ai_html/views/demo/js/echarts.min.js"></script>
+ <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;
+ }
-<head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>鏈堝害鎺掕姒�</title>
- <script src="/ai_html/views/demo/js/tailwind.js"></script>
- <script src="/ai_html/views/demo/js/vue.global.js"></script>
- <script src="/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
- <script src="/ai_html/views/demo/js/index.full.js"></script>
- <link href="/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
- <link href="/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
- <script src="/ai_html/views/demo/js/echarts.min.js"></script>
- <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_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);
+ }
- .leader_right {
- width: 58px;
- height: 14px;
- background-image: url('/static/images/demo/leader_right.png');
- transform: rotate(180deg);
- }
+ .title-inner {
+ font-weight: 900;
+ letter-spacing: 2px;
+ background-color: #31abe3;
+ /* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+ </style>
+ </head>
- .title-inner {
- font-weight: 900;
- letter-spacing: 2px;
- background-color: #31abe3;
- /* background: linear-gradient(92deg, #fff9 0%, #fff9 48.8525390625%, #fff9 100%); */
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- </style>
-</head>
-
-<body>
- <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="leaderBoard">
- <div class="space-y-1 bg-[rgb(242,244,248)]">
- <div class="bg-white">
- <div class="item_title">
- <div class="leader_left"></div>
- <span>鏈堝害缂磋垂閲戦鎺掕</span>
- <div class="leader_right"></div>
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="leaderBoard">
+ <div class="space-y-1 bg-[rgb(242,244,248)]">
+ <div class="bg-white">
+ <div class="item_title">
+ <div class="leader_left"></div>
+ <span>鏈堝害缂磋垂閲戦鎺掕</span>
+ <div class="leader_right"></div>
+ </div>
+ <el-table :data="state.leaderBoardList">
+ <el-table-column prop="Name" label="钀ヤ笟鎵�" width="180"></el-table-column>
+ <el-table-column prop="Amount" label="娴嬭杽鍙�" width="180"></el-table-column>
+ <el-table-column prop="NewRecord" label="鏃堕棿"></el-table-column>
+ <el-table-column prop="CompanyName" label="缃戞牸鍛�"></el-table-column>
+ </el-table>
</div>
- <el-table :data="state.leaderBoardList">
- <el-table-column prop="Name" label="钀ヤ笟鎵�" width="180"></el-table-column>
- <el-table-column prop="Amount" label="娴嬭杽鍙�" width="180"></el-table-column>
- <el-table-column prop="NewRecord" label="鏃堕棿"></el-table-column>
- <el-table-column prop="CompanyName" label="缃戞牸鍛�"></el-table-column>
- </el-table>
+ <div v-resize="chartContainerResize" class="w-full h-full">
+ <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
+ <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div>
+ </div>
</div>
-
- <div class="w-full bg-white h-[270px] mt-[10px]" id="leaderChart"></div>
- <div class="w-full bg-white h-[320px]" id="leaderBarChart"></div>
</div>
- </div>
-</body>
-<script>
- const { createApp, onMounted, ref, reactive } = Vue;
- const App = createApp({
- setup() {
- let state = reactive({
- leaderBoardList: [
- {
- Name: '鍘﹂棬钀ヤ笟鎵�',
- Amount: '10000',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '浜屼緵钀ヤ笟鎵�',
- Amount: '4354363',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '鍚屽畨钀ヤ笟鎵�',
- Amount: '435233',
- NewRecord: '2022-01-01',
- CompanyName: '鏉庡洓',
- },
- {
- Name: '闆嗙編钀ヤ笟鎵�',
- Amount: '54545',
- NewRecord: '2023-01-01',
- CompanyName: '鐜嬩簩',
- },
- {
- Name: '缈旂編钀ヤ笟鎵�',
- Amount: '577887',
- NewRecord: '2024-01-01',
- CompanyName: '寮犱笁',
- },
- {
- Name: '娴锋钵钀ヤ笟鎵�',
- Amount: '5478786',
- NewRecord: '2022-01-01',
- CompanyName: '寮犱笁',
- },
- ],
- });
- const initLeaderBoardChart = () => {
- var chartDom = document.getElementById('leaderChart');
- var leaderChartDom = echarts.init(chartDom);
- var option = {
- title: {
- text: '杩�12鏈堢即璐归噾棰�',
- textStyle: {
- fontSize: 13,
- },
- },
- xAxis: {
- type: 'category',
- data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
- },
- yAxis: {
- type: 'value',
- },
- dataZoom: {
- type: 'inside',
- },
- series: [
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const leaderChartDomRef = ref(null);
+ const leaderBarChartDomRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ leaderBoardList: [
{
- data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
- type: 'line',
+ Name: '鍘﹂棬钀ヤ笟鎵�',
+ Amount: '10000',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '浜屼緵钀ヤ笟鎵�',
+ Amount: '4354363',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '鍚屽畨钀ヤ笟鎵�',
+ Amount: '435233',
+ NewRecord: '2022-01-01',
+ CompanyName: '鏉庡洓',
+ },
+ {
+ Name: '闆嗙編钀ヤ笟鎵�',
+ Amount: '54545',
+ NewRecord: '2023-01-01',
+ CompanyName: '鐜嬩簩',
+ },
+ {
+ Name: '缈旂編钀ヤ笟鎵�',
+ Amount: '577887',
+ NewRecord: '2024-01-01',
+ CompanyName: '寮犱笁',
+ },
+ {
+ Name: '娴锋钵钀ヤ笟鎵�',
+ Amount: '5478786',
+ NewRecord: '2022-01-01',
+ CompanyName: '寮犱笁',
},
],
- };
-
- option && leaderChartDom.setOption(option);
- };
- const initLeaderBoardBarChart = () => {
- const barXData = state.leaderBoardList.map((item) => item.Name);
- var chartDom = document.getElementById('leaderBarChart');
- var leaderBarChartDom = echarts.init(chartDom);
- var option = {
- xAxis: {
- type: 'category',
- data: barXData,
- },
- yAxis: {
- name: '璇勫垎',
- type: 'value',
- },
- series: [
- {
- data: [120, 200, 150, 80, 70, 110],
- type: 'bar',
- showBackground: true,
- backgroundStyle: {
- color: 'rgba(180, 180, 180, 0.2)',
- },
- itemStyle: {
- color: '#61a5e8',
+ });
+ const initLeaderBoardChart = () => {
+ var chartDom = document.getElementById('leaderChart');
+ var leaderChartDom = echarts.init(chartDom);
+ leaderChartDomRef.value = leaderChartDom;
+ var option = {
+ title: {
+ text: '杩�12鏈堢即璐归噾棰�',
+ textStyle: {
+ fontSize: 13,
},
},
- ],
+ xAxis: {
+ type: 'category',
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ },
+ yAxis: {
+ type: 'value',
+ },
+ dataZoom: {
+ type: 'inside',
+ },
+ series: [
+ {
+ data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147],
+ type: 'line',
+ },
+ ],
+ };
+
+ option && leaderChartDom.setOption(option);
};
+ const initLeaderBoardBarChart = () => {
+ const barXData = state.leaderBoardList.map((item) => item.Name);
+ var chartDom = document.getElementById('leaderBarChart');
+ var leaderBarChartDom = echarts.init(chartDom);
+ leaderBarChartDomRef.value = leaderBarChartDom;
+ var option = {
+ xAxis: {
+ type: 'category',
+ data: barXData,
+ },
+ yAxis: {
+ name: '璇勫垎',
+ type: 'value',
+ },
+ series: [
+ {
+ data: [120, 200, 150, 80, 70, 110],
+ type: 'bar',
+ showBackground: true,
+ backgroundStyle: {
+ color: 'rgba(180, 180, 180, 0.2)',
+ },
+ itemStyle: {
+ color: '#61a5e8',
+ },
+ },
+ ],
+ };
- option && leaderBarChartDom.setOption(option);
- };
- onMounted(() => {
- initLeaderBoardChart();
- initLeaderBoardBarChart();
- });
+ option && leaderBarChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ leaderChartDomRef.value.resize();
+ leaderBarChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initLeaderBoardChart();
+ initLeaderBoardBarChart();
+ });
- return { state };
- },
- });
- App.use(ElementPlus);
- App.mount('#leaderBoard');
-</script>
-
-</html>
\ No newline at end of file
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#leaderBoard');
+ </script>
+</html>
--
Gitblit v1.9.3