From 022e0a3889e6510cd1bcc1ca6f18f00b3a62b638 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 25 七月 2024 14:30:01 +0800
Subject: [PATCH] 监测列表
---
src/views/project/ch/demo/MonthlyLeaderBoard.html | 202 ++++++++++++++++++++++++++++++++++++--------------
1 files changed, 144 insertions(+), 58 deletions(-)
diff --git a/src/views/project/ch/demo/MonthlyLeaderBoard.html b/src/views/project/ch/demo/MonthlyLeaderBoard.html
index 0fdd5a7..1c2aa3f 100644
--- a/src/views/project/ch/demo/MonthlyLeaderBoard.html
+++ b/src/views/project/ch/demo/MonthlyLeaderBoard.html
@@ -8,9 +8,10 @@
<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">
- </link>
- <script src="/customer_list/ch/static/js/echarts.min.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css" />
+ <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css" />
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
<style type="text/css">
.item_title {
height: 38px;
@@ -27,86 +28,171 @@
.leader_left {
width: 58px;
height: 14px;
- background-image: url('/customer_list//ch/static/images/demo/leader_left.png');
+ 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');
+ background-image: url('/customer_list/ch/static/images/demo/leader_right.png');
transform: rotate(180deg);
}
- .title-inner{
+
+ .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;
+ 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-[#fff] px-10 py-0" id="leaderBoard">
- <div class="w-full h-full">
- <div class="item_title">
- <div class="leader_left"></div>
- <span>鏈堝害缂磋垂閲戦鎺掕</span>
- <div class="leader_right"></div>
+ <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>
- <div class="w-full h-full justify-center" v-for="(item, index) in state.leaderBoardList" :key="index">
- <div class="w-[300px] h-10 flex justify-between items-center mx-[auto] my-0">
- <span class="title-inner">{{item.Name}}</span>
- <span>{{item.Amount}}</span>
- </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>
</div>
</body>
<script>
const { createApp, onMounted, ref, reactive } = Vue;
- createApp({
+ const leaderChartDomRef = ref(null);
+ const leaderBarChartDomRef = ref(null);
+ const App = createApp({
setup() {
- let state = reactive({
- leaderBoardList: [
- {
- Name: '鍘﹂棬钀ヤ笟鎵�',
- Amount: '10000'
- },
- {
- Name: '浜屼緵钀ヤ笟鎵�',
- Amount: '4354363'
- },
- {
- Name: '鍚屽畨钀ヤ笟鎵�',
- Amount: '435233'
- },
- {
- Name: '闆嗙編钀ヤ笟鎵�',
- Amount: '54545'
- },
- {
- Name: '缈旂編钀ヤ笟鎵�',
- Amount: '577887'
- },
- {
- Name: '娴锋钵钀ヤ笟鎵�',
- Amount: '5478786'
- },
-
- ]
- });
- const initLeaderBoard = () => {
-console.log("馃殌 ~ leaderBoardList:", state.leaderBoardList)
- }
+ 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);
+ 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(() => {
- initLeaderBoard();
+ window.parent.addEventListener('resize', () => {
+ leaderChartDomRef.value.resize();
+ leaderBarChartDomRef.value.resize();
+ });
+ initLeaderBoardChart();
+ initLeaderBoardBarChart();
});
return { state };
},
- }).mount('#leaderBoard');
+ });
+ App.use(ElementPlus);
+ App.mount('#leaderBoard');
</script>
</html>
\ No newline at end of file
--
Gitblit v1.9.3