From 8cab6cefd30a4cf20e57237d721e1dd13cfda407 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 16 七月 2024 16:16:54 +0800
Subject: [PATCH] Merge branch 'master' of http://47.103.154.90:83/r/WI/Web.V1.0
---
src/views/project/ch/demo/Overview.html | 442 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 342 insertions(+), 100 deletions(-)
diff --git a/src/views/project/ch/demo/Overview.html b/src/views/project/ch/demo/Overview.html
index f10488a..760e3df 100644
--- a/src/views/project/ch/demo/Overview.html
+++ b/src/views/project/ch/demo/Overview.html
@@ -1,18 +1,27 @@
<!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/static/js/tailwind.js"></script>
- <script src="/customer_list/ch/static/js/vue.global.js"></script>
- <script src="/customer_list/ch/static/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>
- </head>
- <body>
- <div class="w-full h-full bg-[#fff] px-10 py-0" id="overview">
- <div class="w-full h-[40px] flex items-center">骞村害缂磋垂鎯呭喌</div>
+<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/datav.umd.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/echarts.min.js"></script>
+ <link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css">
+ </link>
+ <link href="/customer_list/ch/static/fonts/iconfont/iconfont.css" rel="stylesheet" type="text/css">
+ </link>
+ <link href="/customer_list/ch/ai_html/views/demo/css/ele-index.css" rel="stylesheet" type="text/css">
+ </link>
+</head>
+
+<body>
+ <div class="w-[50%] h-full bg-[#f2f4f8] " id="overview">
+ <!-- <div class="w-full h-[40px] flex items-center">骞村害缂磋垂鎯呭喌</div>
<div class="h-full">
<div class="w-[310px] flex flex-wrap justify-between h-[220px]">
<div v-for="item in state.annualPayment" :key="item" class="w-[50%] h-[33%] flex items-center">
@@ -23,94 +32,327 @@
</div>
</div>
</div>
+ </div> -->
+ <div class="screen-top-center">
+ <div class="top-center-data">
+ <div class="data-item" v-for="(item, index) in state.dataList">
+ <p class="data-item-title">{{item.title}}</p>
+ <p class="data-item-desc">{{item.value}}</p>
+ </div>
+ </div>
+ <div class="top-center-chart">
+ <div class="chart-item">
+ <div class="screen-top-header flex flex-wrap justify-center items-center">
+ <div class="header-left flex-c">
+ <i class="iconfont icon-ico_shuju text-[#1c86ff]"></i>
+ </div>
+ <div class="header-right flex-l">
+ <span class="header-title">浠婃棩鍦板尯閿�閲忔帓琛�</span>
+ <Decoration3 class="dv-dec-3" />
+ </div>
+ </div>
+ <div class=" max-w-[600px] h-full ml-[5px]">
+ <div v-for="(item,index) in state.rankList.data" :key="index" class="flex">
+ <div class="text-[16px] text-[#000] w-[70px]">{{item.name}}</div>
+
+ <el-progress :stroke-width="20" :percentage="item.value/100" class="mb-[15px] w-full"
+ :text-inside="true"></el-progress>
+ <div class="text-[12px] text-[#000] w-[70px] ml-[10px]">{{item.value}}</div>
+ </div>
+ </div>
+ </div>
+ <div class="chart-item">
+ <div class="screen-top-header flex-l">
+ <div class="header-left flex-c">
+ <i class="iconfont icon-shangchuan text-[#1c86ff]"></i>
+ </div>
+ <div class="header-right flex-l">
+ <span class="header-title">浠婃棩涓氱哗瀹屾垚搴�</span>
+ <Decoration3 class="dv-dec-3" />
+ </div>
+ </div>
+ <div class="pond-section">
+ <div id="pond" class="w-full h-[270px]"></div>
+ </div>
+ </div>
</div>
</div>
- </body>
- <script>
- const { createApp, onMounted, ref, reactive } = Vue;
- createApp({
- setup() {
- let state = reactive({
- annualPayment: [
- {
- ID: 1,
- Name: '鏈勾缂磋垂',
- Value: 8009987,
- Unit: '绗�',
- },
- {
- ID: 2,
- Name: '缂磋垂閲戦',
- Value: 7298.3,
- Unit: '涓囧厓',
- },
- {
- ID: 3,
- Name: '鏈湀缂磋垂',
- Value: 198,
- Unit: '绗�',
- },
- {
- ID: 4,
- Name: '缂磋垂閲戦',
- Value: 3,
- Unit: '涓囧厓',
- },
- {
- ID: 5,
- Name: '鏈湀缂磋垂',
- Value: 22,
- Unit: '绗�',
- },
- {
- ID: 6,
- Name: '缂磋垂閲戦',
- Value: 0.3,
- Unit: '涓囧厓',
- },
- {
- ID: 7,
- Name: '浠婃棩瀹炴椂',
- Value: 198,
- Unit: '绗�',
- },
- {
- ID: 8,
- Name: '缂磋垂閲戦',
- Value: 198,
- Unit: '涓囧厓',
- },
- ],
- });
- const getOverViewList = () => {
- const iconList = [
- 'biaodan',
- 'putong',
- 'zhongduancanshuchaxun',
- 'shidu',
- 'fuwenbenkuang',
- 'fuwenben',
- 'jiliandongxuanzeqi',
- 'jinridaiban',
- 'gongju',
- ];
- state.annualPayment.forEach((annual, index) => {
- annual.Icon = iconList[index];
- annual.BgColor = randomHexColor();
- });
- };
- //闅忔満鐢熸垚棰滆壊
- const randomHexColor = () => {
- return `#${Math.floor(Math.random() * 16777215)
- .toString(16)
- .padEnd(6, '0')}`;
- };
- onMounted(() => {
- getOverViewList();
- });
+ </div>
+</body>
+<script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const { Decoration3 } = DataV;
+ const demoOverViewChart=ref(null)
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ annualPayment: [
+ {
+ ID: 1,
+ Name: '鏈勾缂磋垂',
+ Value: 8009987,
+ Unit: '绗�',
+ },
+ {
+ ID: 2,
+ Name: '缂磋垂閲戦',
+ Value: 7298.3,
+ Unit: '涓囧厓',
+ },
+ {
+ ID: 3,
+ Name: '鏈湀缂磋垂',
+ Value: 198,
+ Unit: '绗�',
+ },
+ {
+ ID: 4,
+ Name: '缂磋垂閲戦',
+ Value: 3,
+ Unit: '涓囧厓',
+ },
+ {
+ ID: 5,
+ Name: '鏈湀缂磋垂',
+ Value: 22,
+ Unit: '绗�',
+ },
+ {
+ ID: 6,
+ Name: '缂磋垂閲戦',
+ Value: 0.3,
+ Unit: '涓囧厓',
+ },
+ {
+ ID: 7,
+ Name: '浠婃棩瀹炴椂',
+ Value: 198,
+ Unit: '绗�',
+ },
+ {
+ ID: 8,
+ Name: '缂磋垂閲戦',
+ Value: 198,
+ Unit: '涓囧厓',
+ },
+ ],
- return { state };
- },
- }).mount('#overview');
- </script>
-</html>
+ dataList: [
+ {
+ title: '浠婃棩绱閿�閲�',
+ value: 755,
+ config: {
+ number: [755],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24
+ }
+ }
+ }, {
+ title: '鏈懆绱閿�閲�',
+ value: 3288,
+ config: {
+ number: [3288],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24
+ }
+ }
+ }, {
+ title: '鏈湀绱閿�閲�',
+ value: 14222,
+ config: {
+ number: [14222],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24
+ }
+ }
+ }, {
+ title: '瀛ｅ害绱閿�閲�',
+ value: 41022,
+ config: {
+ number: [41022],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24
+ }
+ }
+ }, {
+ title: '骞村害绱閿�閲�',
+ value: 176888,
+ config: {
+ number: [176888],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24
+ }
+ }
+ }, {
+ title: '浠婃棩鐩爣閿�閲�',
+ value: 820,
+ config: {
+ number: [820],
+ toFixed: 0,
+ content: '{nt}',
+ textAlign: 'left',
+ style: {
+ fontSize: 24
+ }
+ }
+ }
+ ],
+ completeObj: {
+ data: [45, 56],
+ shape: 'round'
+ },
+ rankList: {
+ data: [
+ {
+ name: '姝︽眽甯�',
+ value: 1210
+ },
+ {
+ name: '鍖椾含',
+ value: 1655
+ },
+ {
+ name: '涓婃捣',
+ value: 1788
+ },
+ {
+ name: '娣卞湷',
+ value: 2100
+ },
+ {
+ name: '骞垮窞',
+ value: 1577
+ },
+ {
+ name: '鎴愰兘',
+ value: 1625
+ },
+ {
+ name: '鍘﹂棬',
+ value: 857
+ },
+ {
+ name: '閮戝窞',
+ value: 1322
+ },
+
+ ],
+ carousel: 'single',
+ unit: '杈�'
+ },
+ intervalInstance: 0
+ });
+ const getOverViewList = () => {
+ const iconList = [
+ 'biaodan',
+ 'putong',
+ 'zhongduancanshuchaxun',
+ 'shidu',
+ 'fuwenbenkuang',
+ 'fuwenben',
+ 'jiliandongxuanzeqi',
+ 'jinridaiban',
+ 'gongju',
+ ];
+ state.annualPayment.forEach((annual, index) => {
+ annual.Icon = iconList[index];
+ annual.BgColor = randomHexColor();
+ });
+ };
+ //闅忔満鐢熸垚棰滆壊
+ const randomHexColor = () => {
+ return `#${Math.floor(Math.random() * 16777215)
+ .toString(16)
+ .padEnd(6, '0')}`;
+ };
+ onMounted(() => {
+ // getOverViewList();
+ window.addEventListener('resize', () => {
+ demoOverViewChart.value.resize();
+ });
+ initOverViewEchart()
+ });
+ const initOverViewEchart = () => {
+ var chartDom = document.getElementById('pond');
+ var myChart = echarts.init(chartDom);
+ demoOverViewChart.value=myChart
+ var option = {
+ tooltip: {
+ trigger: 'item'
+ },
+ title: {
+ // text: '76%',//涓绘爣棰樻枃鏈�
+ subtext: '76%',//鍓爣棰樻枃鏈�
+ left: 'center',
+
+ top:'42%',
+ textStyle: {
+ fontSize: 38,
+ color: '#454c5c',
+ align: 'center'
+ },
+ subtextStyle: {
+ fontFamily: "寰蒋闆呴粦",
+ fontSize: 16,
+ color: '#6c7a89',
+ },
+ },
+ series: [
+ {
+ name: 'Access From',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center'
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 40,
+ fontWeight: 'bold'
+ }
+ },
+ labelLine: {
+ show: false
+ },
+ data: [
+ { value: 1048, name: 'Search Engine' },
+ { value: 735, name: 'Direct' },
+ { value: 580, name: 'Email' },
+ { value: 484, name: 'Union Ads' },
+ { value: 300, name: 'Video Ads' }
+ ]
+ }
+ ]
+ };
+
+ option && myChart.setOption(option);
+ }
+
+ return { state };
+ },
+ })
+
+ App.component('Decoration3', Decoration3)
+ App.use(ElementPlus);
+ App.mount('#overview')
+</script>
+
+</html>
\ No newline at end of file
--
Gitblit v1.9.3