From 187e4398e9d4193b777f6e4a45a1f06ac52f32d2 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 17 七月 2024 17:10:22 +0800
Subject: [PATCH] fix: 修改页面的布局
---
customer_list/ch/ai_html/views/demo/html/Overview.html | 632 +++++++++++++++++++++++++++++----------------------------
1 files changed, 320 insertions(+), 312 deletions(-)
diff --git a/customer_list/ch/ai_html/views/demo/html/Overview.html b/customer_list/ch/ai_html/views/demo/html/Overview.html
index a6f8115..48cb9c8 100644
--- a/customer_list/ch/ai_html/views/demo/html/Overview.html
+++ b/customer_list/ch/ai_html/views/demo/html/Overview.html
@@ -1,23 +1,24 @@
<!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/datav.umd.js"></script>
- <script src="/ai_html/views/demo/js/index.full.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/echarts.min.js"></script>
- <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
- <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" />
- </head>
- <body>
- <div class="w-full h-full bg-[#f2f4f8]" 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="/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/datav.umd.js"></script>
+ <script src="/ai_html/views/demo/js/index.full.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/echarts.min.js"></script>
+ <link href="/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
+ <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" />
+</head>
+
+<body>
+ <div class="w-full 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">
@@ -29,333 +30,340 @@
</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 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="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 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="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 class="header-right flex-l">
+ <span class="header-title">浠婃棩涓氱哗瀹屾垚搴�</span>
+ <Decoration3 class="dv-dec-3" />
</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 class="pond-section">
+ <div id="pond" class="w-full h-[270px]"></div>
</div>
</div>
</div>
</div>
- </body>
- <script>
- const { createApp, onMounted, ref, reactive } = Vue;
- const { Decoration3 } = DataV;
- const demoOverViewChart = ref(null);
- const App = createApp({
- setup() {
- let state = reactive({
- annualPayment: [
+ </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: '涓囧厓',
+ },
+ ],
+
+ 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: [
{
- ID: 1,
- Name: '鏈勾缂磋垂',
- Value: 8009987,
- Unit: '绗�',
+ name: '姝︽眽甯�',
+ value: 1210,
},
{
- ID: 2,
- Name: '缂磋垂閲戦',
- Value: 7298.3,
- Unit: '涓囧厓',
+ name: '鍖椾含',
+ value: 1655,
},
{
- ID: 3,
- Name: '鏈湀缂磋垂',
- Value: 198,
- Unit: '绗�',
+ name: '涓婃捣',
+ value: 1788,
},
{
- ID: 4,
- Name: '缂磋垂閲戦',
- Value: 3,
- Unit: '涓囧厓',
+ name: '娣卞湷',
+ value: 2100,
},
{
- ID: 5,
- Name: '鏈湀缂磋垂',
- Value: 22,
- Unit: '绗�',
+ name: '骞垮窞',
+ value: 1577,
},
{
- ID: 6,
- Name: '缂磋垂閲戦',
- Value: 0.3,
- Unit: '涓囧厓',
+ name: '鎴愰兘',
+ value: 1625,
},
{
- ID: 7,
- Name: '浠婃棩瀹炴椂',
- Value: 198,
- Unit: '绗�',
+ name: '鍘﹂棬',
+ value: 857,
},
{
- ID: 8,
- Name: '缂磋垂閲戦',
- Value: 198,
- Unit: '涓囧厓',
+ 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);
+ var dataCake = [
+ { value: 2562, name: '浼樿川', percentage: '15.86%' },
+ { value: 6000, name: '鑹ソ', percentage: '37.15%' },
+ { value: 2589, name: '涓�鑸�', percentage: '16.03%' },
+ { value: 4000, name: '杈冨樊', percentage: '24.77%' },
+ { value: 1000, name: '鎭跺姡', percentage: '6.19%' },
+ ];
+ demoOverViewChart.value = myChart;
+ var option = {
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'right',
+ formatter: function (name) {
+ let target, percentage;
+ for (let i = 0; i < dataCake.length; i++) {
+ if (dataCake[i].name === name) {
+ target = dataCake[i].value;
+ percentage = dataCake[i].percentage;
+ }
+ }
+ let arr = [name + ' ', ' ' + target + '浜� ', ' ' + percentage];
+ return arr.join(' ');
+ },
+ },
+ // title: {
+ // text: '76%',//涓绘爣棰樻枃鏈�
+ // subtext: '76%', //鍓爣棰樻枃鏈�
+ // left: 'center',
- dataList: [
+ // top: '42%',
+ // textStyle: {
+ // fontSize: 38,
+ // color: '#454c5c',
+ // align: 'center',
+ // },
+ // subtextStyle: {
+ // fontFamily: '寰蒋闆呴粦',
+ // fontSize: 16,
+ // color: '#6c7a89',
+ // },
+ // },
+ series: [
{
- title: '浠婃棩绱閿�閲�',
- value: 755,
- config: {
- number: [755],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
+ name: '浠婃棩涓氱哗瀹屾垚搴�',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ label: {
+ show: false,
+ position: 'center',
},
- },
- {
- title: '鏈懆绱閿�閲�',
- value: 3288,
- config: {
- number: [3288],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
+
+ labelLine: {
+ show: false,
},
- },
- {
- 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,
- },
- },
+ data: dataCake,
},
],
- 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 };
- },
- });
+ option && myChart.setOption(option);
+ };
- App.component('Decoration3', Decoration3);
- App.use(ElementPlus);
- App.mount('#overview');
- </script>
-</html>
+ return { state };
+ },
+ });
+
+ App.component('Decoration3', Decoration3);
+ App.use(ElementPlus);
+ App.mount('#overview');
+</script>
+
+</html>
\ No newline at end of file
--
Gitblit v1.9.3