From 4300e2394a205f3afbf4a3528db851e5636041d9 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期五, 19 七月 2024 14:24:25 +0800
Subject: [PATCH] fix: 修改页面路径
---
src/views/project/ch/demo/WorkOrder.html | 2
customer_list/ch/ai_html/views/demo/html/UnionPay.html | 2
src/views/project/ch/demo/UnionPay.html | 2
customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html | 8 +
customer_list/ch/ai_html/views/demo/html/WorkOrder.html | 2
src/views/project/ch/demo/CreditRateRank.html | 2
src/views/project/ch/demo/MonthlyLeaderBoard.html | 8 +
customer_list/ch/ai_html/views/demo/html/MonthlyPay.html | 12 +
customer_list/ch/ai_html/views/demo/html/Overview.html | 188 +++++++++++++++-------
src/views/project/ch/demo/MonthlyPay.html | 12 +
src/views/project/ch/demo/Overview.html | 188 +++++++++++++++-------
11 files changed, 293 insertions(+), 133 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..b360350 100644
--- a/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
+++ b/customer_list/ch/ai_html/views/demo/html/MonthlyLeaderBoard.html
@@ -73,6 +73,8 @@
</body>
<script>
const { createApp, onMounted, ref, reactive } = Vue;
+ const leaderChartDomRef = ref(null);
+ const leaderBarChartDomRef = ref(null);
const App = createApp({
setup() {
let state = reactive({
@@ -118,6 +120,7 @@
const initLeaderBoardChart = () => {
var chartDom = document.getElementById('leaderChart');
var leaderChartDom = echarts.init(chartDom);
+ leaderChartDomRef.value = leaderChartDom;
var option = {
title: {
text: '杩�12鏈堢即璐归噾棰�',
@@ -149,6 +152,7 @@
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',
@@ -176,6 +180,10 @@
option && leaderBarChartDom.setOption(option);
};
onMounted(() => {
+ window.parent.addEventListener('resize', () => {
+ leaderChartDomRef.value.resize();
+ leaderBarChartDomRef.value.resize();
+ });
initLeaderBoardChart();
initLeaderBoardBarChart();
});
diff --git a/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html b/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html
index 8712628..9d8e8ad 100644
--- a/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html
+++ b/customer_list/ch/ai_html/views/demo/html/MonthlyPay.html
@@ -26,12 +26,15 @@
</body>
<script>
const { createApp, onMounted, ref, reactive } = Vue;
-
+ const monthlyPayChart = ref(null)
+ const monthPayRecord = ref(null)
+ const monthPayAmount = ref(null)
createApp({
setup() {
const initMonthlyPayEChart = () => {
const chartDom = document.getElementById('MonthlyPayChart');
const myChart = echarts.init(chartDom);
+ monthlyPayChart.value = myChart
const data = [{ "name": 1596038400000, "value": [1596038400000, 53] }, { "name": 1596039040000, "value": [1596039040000, 51] }, { "name": 1596039680000, "value": [1596039680000, 51] }, { "name": 1596040320000, "value": [1596040320000, 51] }, { "name": 1596040832000, "value": [1596040832000, 58] }, { "name": 1596041472000, "value": [1596041472000, 67] }, { "name": 1596042112000, "value": [1596042112000, 68] }, { "name": 1596042624000, "value": [1596042624000, 54] }, { "name": 1596043264000, "value": [1596043264000, 51] }, { "name": 1596043904000, "value": [1596043904000, 57] }, { "name": 1596044416000, "value": [1596044416000, 52] }, { "name": 1596045056000, "value": [1596045056000, 54] }, { "name": 1596045696000, "value": [1596045696000, 51] }, { "name": 1596046208000, "value": [1596046208000, 51] }, { "name": 1596046848000, "value": [1596046848000, 52] }, { "name": 1596047488000, "value": [1596047488000, 51] }, { "name": 1596048000000, "value": [1596048000000, 53] }, { "name": 1596048640000, "value": [1596048640000, 52] }, { "name": 1596049280000, "value": [1596049280000, 67] }, { "name": 1596049920000, "value": [1596049920000, 59] }, { "name": 1596050432000, "value": [1596050432000, 58] }, { "name": 1596051072000, "value": [1596051072000, 52] }, { "name": 1596051712000, "value": [1596051712000, 55] }, { "name": 1596052224000, "value": [1596052224000, 53] }, { "name": 1596052864000, "value": [1596052864000, 54] }, { "name": 1596053504000, "value": [1596053504000, 54] }, { "name": 1596054016000, "value": [1596054016000, 54] }, { "name": 1596054656000, "value": [1596054656000, 52] }, { "name": 1596055296000, "value": [1596055296000, 54] }, { "name": 1596055808000, "value": [1596055808000, 65] }, { "name": 1596056448000, "value": [1596056448000, 59] }, { "name": 1596057088000, "value": [1596057088000, 55] }, { "name": 1596057600000, "value": [1596057600000, 53] }, { "name": 1596058240000, "value": [1596058240000, 55] }, { "name": 1596058880000, "value": [1596058880000, 54] }, { "name": 1596059520000, "value": [1596059520000, 55] }, { "name": 1596060032000, "value": [1596060032000, 64] }, { "name": 1596060672000, "value": [1596060672000, 57] }, { "name": 1596061312000, "value": [1596061312000, 56] }, { "name": 1596061824000, "value": [1596061824000, 55] }, { "name": 1596062464000, "value": [1596062464000, 55] }, { "name": 1596063104000, "value": [1596063104000, 55] }, { "name": 1596063616000, "value": [1596063616000, 58] }, { "name": 1596064256000, "value": [1596064256000, 79] }, { "name": 1596064896000, "value": [1596064896000, 60] }, { "name": 1596065408000, "value": [1596065408000, 63] }, { "name": 1596066048000, "value": [1596066048000, 63] }, { "name": 1596066688000, "value": [1596066688000, 82] }, { "name": 1596067200000, "value": [1596067200000, 81] }, { "name": 1596067840000, "value": [1596067840000, 78] }, { "name": 1596068480000, "value": [1596068480000, 78] }, { "name": 1596069120000, "value": [1596069120000, 65] }, { "name": 1596069632000, "value": [1596069632000, 76] }, { "name": 1596070272000, "value": [1596070272000, 80] }, { "name": 1596070912000, "value": [1596070912000, 78] }, { "name": 1596107040000, "value": [1596107040000, 70] }, { "name": 1596124799000, "value": [1596124799000, 0] }];
//涓嬮潰鏄竴涓畝鍗曠殑demo锛屾柟渚垮睍绀烘暟鎹牸寮忓拰鏋勬垚
let option = {
@@ -114,6 +117,7 @@
const initMonthPayRecordEChart = () => {
const chartDom = document.getElementById('MonthPayRecord');
const myMonthPayChart = echarts.init(chartDom);
+ monthPayRecord.value = myMonthPayChart
var monthPayOption = {
title: {
text: '杩�12涓湀鐨勭即璐硅褰�',
@@ -224,6 +228,7 @@
const initMonthPayAmountEChart = () => {
const chartDom = document.getElementById('MonthPayAmount');
const myMonthPayAmountChart = echarts.init(chartDom);
+ monthPayAmount.value = myMonthPayAmountChart
var monthPayAmountOption = {
title: {
text: '杩�12涓湀鐨勭即璐归噾棰�',
@@ -250,6 +255,11 @@
myMonthPayAmountChart && myMonthPayAmountChart.resize();
}
onMounted(() => {
+ window.parent.addEventListener('resize', () => {
+ monthlyPayChart.value && monthlyPayChart.value.resize();
+ monthPayRecord.value && monthPayRecord.value.resize();
+ monthPayAmount.value && monthPayAmount.value.resize();
+ })
initMonthlyPayEChart();
initMonthPayRecordEChart()
initMonthPayAmountEChart()
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 3d14619..4fdd48e 100644
--- a/customer_list/ch/ai_html/views/demo/html/Overview.html
+++ b/customer_list/ch/ai_html/views/demo/html/Overview.html
@@ -11,9 +11,26 @@
<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>
+ <!-- <script src="/ai_html/lib/common.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" />
+ <style>
+ .el-dialog__header {
+ margin-right: 0;
+ padding: 8px 10px;
+ background: #528abe
+ }
+
+ .el-dialog__title {
+ color: #fff;
+ font-size: 14px;
+ }
+
+ .el-dialog__close {
+ color: #fff !important;
+ }
+ </style>
</head>
<body>
@@ -22,7 +39,7 @@
<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>
+ <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p>
</div>
</div>
<div class="top-center-chart">
@@ -62,12 +79,17 @@
</div>
</div>
</div>
+ <el-dialog v-model="state.isShowChartVisible" :title="state.volumeInfo.title" width="50%"
+ class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
+ <div id="businessTrends" class="w-full h-[500px]"></div>
+ </el-dialog>
</div>
</body>
<script>
- const { createApp, onMounted, ref, reactive } = Vue;
+ const { createApp, onMounted, ref, reactive, nextTick } = Vue;
const { Decoration3 } = DataV;
const demoOverViewChart = ref(null);
+ const demoBusinessTrendsChart = ref(null);
const App = createApp({
setup() {
let state = reactive({
@@ -124,82 +146,40 @@
dataList: [
{
+ id: 1,
title: '浠婃棩绱閿�閲�',
value: 755,
- config: {
- number: [755],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 2,
title: '鏈懆绱閿�閲�',
value: 3288,
- config: {
- number: [3288],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 3,
title: '鏈湀绱閿�閲�',
value: 14222,
- config: {
- number: [14222],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 4,
title: '瀛ｅ害绱閿�閲�',
value: 41022,
- config: {
- number: [41022],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 5,
title: '骞村害绱閿�閲�',
value: 176888,
- config: {
- number: [176888],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 6,
title: '浠婃棩鐩爣閿�閲�',
value: 820,
- config: {
- number: [820],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
],
completeObj: {
@@ -245,6 +225,12 @@
unit: '杈�',
},
intervalInstance: 0,
+ isShowChartVisible: false,
+ volumeInfo: {
+ id: null,
+ title: null,
+ value: null,
+ }
});
const getOverViewList = () => {
const iconList = [
@@ -271,11 +257,15 @@
};
onMounted(() => {
// getOverViewList();
- window.addEventListener('resize', () => {
- demoOverViewChart.value.resize();
- });
initOverViewEchart();
+
+ window.parent.addEventListener('resize', () => {
+ demoOverViewChart.value.resize();
+ demoBusinessTrendsChart.value.resize();
+ });
+
});
+ //鍒濆鍖栦粖鏃ヤ笟缁╁畬鎴愬害echart
const initOverViewEchart = () => {
var chartDom = document.getElementById('pond');
var myChart = echarts.init(chartDom);
@@ -293,7 +283,7 @@
},
legend: {
orient: 'vertical',
- left: '60%',
+ left: '54%',
y: 'center',
formatter: function (name) {
@@ -309,7 +299,7 @@
},
},
grid: {
- left: '45'
+ left: '25'
},
// title: {
// text: '76%',//涓绘爣棰樻枃鏈�
@@ -332,7 +322,7 @@
{
name: '浠婃棩涓氱哗瀹屾垚搴�',
type: 'pie',
- radius: ['40%', '70%'],
+ radius: ['40%', '60%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
@@ -350,8 +340,80 @@
option && myChart.setOption(option);
};
+ //鍒濆鍖栧脊绐梕chart
+ const initBusinessTrendsEchart = () => {
+ var chartDom = document.getElementById('businessTrends');
+ var businessTrendsChart = echarts.init(chartDom);
+ demoBusinessTrendsChart.value = businessTrendsChart;
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: '3%', // 璋冩暣宸﹁竟璺�
+ right: '5%', // 璋冩暣鍙宠竟璺�
+ bottom: '3%', // 璋冩暣搴曢儴杈硅窛
+ top: '5%', // 璋冩暣椤堕儴杈硅窛
+ containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
+ },
+ xAxis: {
+ name: '鏃堕棿',
+ type: 'category',
+ minInterval: 3600 * 4 * 1000, //12
+ data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45']
- return { state };
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value}',
+ },
+ },
+ dataZoom: {
+ type: 'inside',
+ },
+ series: [
+ {
+ name: '閿�鍞',
+ type: 'line',
+ data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 绀轰緥鏁版嵁锛屾ā鎷熻捣浼忔洿澶�
+ smooth: true, // 鎶樼嚎骞虫粦
+ lineStyle: {
+ width: 2,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#62c1fe' },
+ { offset: 0.5, color: '#ad90f7' },
+ { offset: 1, color: '#e875f2' },
+ ]),
+ },
+ symbolSize: (value, params) => {
+ // 鑾峰彇鏁版嵁绯诲垪鐨勯暱搴�
+ const seriesLength = option.series[0].data.length;
+ // 涓棿鑺傜偣鏀惧ぇ
+ if (params.dataIndex === Math.floor(seriesLength / 2)) {
+ return 8; // 涓棿鑺傜偣鐨勫ぇ灏�
+ }
+ return 8; // 鍏朵粬鑺傜偣鐨勫ぇ灏�
+ },
+ },
+ ],
+ };
+ option && businessTrendsChart.setOption(option);
+ }
+ //鐐瑰嚮鏁版嵁椤瑰脊绐�
+ const handleDataItemClick = (item) => {
+ state.volumeInfo = item
+ nextTick(() => {
+ initBusinessTrendsEchart();
+ });
+ state.isShowChartVisible = true;
+ };
+ //鍏抽棴寮圭獥
+ const handleCloseChartVisible = () => {
+ state.isShowChartVisible = false;
+ }
+
+ return { state, handleDataItemClick, handleCloseChartVisible };
},
});
diff --git a/customer_list/ch/ai_html/views/demo/html/UnionPay.html b/customer_list/ch/ai_html/views/demo/html/UnionPay.html
index 935c61b..1bc9d0a 100644
--- a/customer_list/ch/ai_html/views/demo/html/UnionPay.html
+++ b/customer_list/ch/ai_html/views/demo/html/UnionPay.html
@@ -197,7 +197,7 @@
option && myChart.setOption(option);
};
onMounted(() => {
- window.addEventListener('resize', () => {
+ window.parent.addEventListener('resize', () => {
myChartRef.value.resize();
});
initUnionPayEChart();
diff --git a/customer_list/ch/ai_html/views/demo/html/WorkOrder.html b/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
index 0c9fc21..443451b 100644
--- a/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
+++ b/customer_list/ch/ai_html/views/demo/html/WorkOrder.html
@@ -180,7 +180,7 @@
};
onMounted(() => {
// getOverViewList();
- window.addEventListener('resize', () => {
+ window.parent.addEventListener('resize', () => {
inspectionChart.value.resize();
salesRankRef.value.resize();
});
diff --git a/src/views/project/ch/demo/CreditRateRank.html b/src/views/project/ch/demo/CreditRateRank.html
index b9fda7f..60dc6b9 100644
--- a/src/views/project/ch/demo/CreditRateRank.html
+++ b/src/views/project/ch/demo/CreditRateRank.html
@@ -233,7 +233,7 @@
option && creditRatePieRankDom.setOption(option);
};
onMounted(() => {
- window.addEventListener('resize', () => {
+ window.parent.addEventListener('resize', () => {
creditRateRankRef.value.resize();
creditRatePieRankRef.value.resize();
});
diff --git a/src/views/project/ch/demo/MonthlyLeaderBoard.html b/src/views/project/ch/demo/MonthlyLeaderBoard.html
index 43f69f2..1c2aa3f 100644
--- a/src/views/project/ch/demo/MonthlyLeaderBoard.html
+++ b/src/views/project/ch/demo/MonthlyLeaderBoard.html
@@ -73,6 +73,8 @@
</body>
<script>
const { createApp, onMounted, ref, reactive } = Vue;
+ const leaderChartDomRef = ref(null);
+ const leaderBarChartDomRef = ref(null);
const App = createApp({
setup() {
let state = reactive({
@@ -118,6 +120,7 @@
const initLeaderBoardChart = () => {
var chartDom = document.getElementById('leaderChart');
var leaderChartDom = echarts.init(chartDom);
+ leaderChartDomRef.value = leaderChartDom;
var option = {
title: {
text: '杩�12鏈堢即璐归噾棰�',
@@ -149,6 +152,7 @@
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',
@@ -176,6 +180,10 @@
option && leaderBarChartDom.setOption(option);
};
onMounted(() => {
+ window.parent.addEventListener('resize', () => {
+ leaderChartDomRef.value.resize();
+ leaderBarChartDomRef.value.resize();
+ });
initLeaderBoardChart();
initLeaderBoardBarChart();
});
diff --git a/src/views/project/ch/demo/MonthlyPay.html b/src/views/project/ch/demo/MonthlyPay.html
index 763db8e..4f8f095 100644
--- a/src/views/project/ch/demo/MonthlyPay.html
+++ b/src/views/project/ch/demo/MonthlyPay.html
@@ -26,12 +26,15 @@
</body>
<script>
const { createApp, onMounted, ref, reactive } = Vue;
-
+ const monthlyPayChart = ref(null)
+ const monthPayRecord = ref(null)
+ const monthPayAmount = ref(null)
createApp({
setup() {
const initMonthlyPayEChart = () => {
const chartDom = document.getElementById('MonthlyPayChart');
const myChart = echarts.init(chartDom);
+ monthlyPayChart.value = myChart
const data = [{ "name": 1596038400000, "value": [1596038400000, 53] }, { "name": 1596039040000, "value": [1596039040000, 51] }, { "name": 1596039680000, "value": [1596039680000, 51] }, { "name": 1596040320000, "value": [1596040320000, 51] }, { "name": 1596040832000, "value": [1596040832000, 58] }, { "name": 1596041472000, "value": [1596041472000, 67] }, { "name": 1596042112000, "value": [1596042112000, 68] }, { "name": 1596042624000, "value": [1596042624000, 54] }, { "name": 1596043264000, "value": [1596043264000, 51] }, { "name": 1596043904000, "value": [1596043904000, 57] }, { "name": 1596044416000, "value": [1596044416000, 52] }, { "name": 1596045056000, "value": [1596045056000, 54] }, { "name": 1596045696000, "value": [1596045696000, 51] }, { "name": 1596046208000, "value": [1596046208000, 51] }, { "name": 1596046848000, "value": [1596046848000, 52] }, { "name": 1596047488000, "value": [1596047488000, 51] }, { "name": 1596048000000, "value": [1596048000000, 53] }, { "name": 1596048640000, "value": [1596048640000, 52] }, { "name": 1596049280000, "value": [1596049280000, 67] }, { "name": 1596049920000, "value": [1596049920000, 59] }, { "name": 1596050432000, "value": [1596050432000, 58] }, { "name": 1596051072000, "value": [1596051072000, 52] }, { "name": 1596051712000, "value": [1596051712000, 55] }, { "name": 1596052224000, "value": [1596052224000, 53] }, { "name": 1596052864000, "value": [1596052864000, 54] }, { "name": 1596053504000, "value": [1596053504000, 54] }, { "name": 1596054016000, "value": [1596054016000, 54] }, { "name": 1596054656000, "value": [1596054656000, 52] }, { "name": 1596055296000, "value": [1596055296000, 54] }, { "name": 1596055808000, "value": [1596055808000, 65] }, { "name": 1596056448000, "value": [1596056448000, 59] }, { "name": 1596057088000, "value": [1596057088000, 55] }, { "name": 1596057600000, "value": [1596057600000, 53] }, { "name": 1596058240000, "value": [1596058240000, 55] }, { "name": 1596058880000, "value": [1596058880000, 54] }, { "name": 1596059520000, "value": [1596059520000, 55] }, { "name": 1596060032000, "value": [1596060032000, 64] }, { "name": 1596060672000, "value": [1596060672000, 57] }, { "name": 1596061312000, "value": [1596061312000, 56] }, { "name": 1596061824000, "value": [1596061824000, 55] }, { "name": 1596062464000, "value": [1596062464000, 55] }, { "name": 1596063104000, "value": [1596063104000, 55] }, { "name": 1596063616000, "value": [1596063616000, 58] }, { "name": 1596064256000, "value": [1596064256000, 79] }, { "name": 1596064896000, "value": [1596064896000, 60] }, { "name": 1596065408000, "value": [1596065408000, 63] }, { "name": 1596066048000, "value": [1596066048000, 63] }, { "name": 1596066688000, "value": [1596066688000, 82] }, { "name": 1596067200000, "value": [1596067200000, 81] }, { "name": 1596067840000, "value": [1596067840000, 78] }, { "name": 1596068480000, "value": [1596068480000, 78] }, { "name": 1596069120000, "value": [1596069120000, 65] }, { "name": 1596069632000, "value": [1596069632000, 76] }, { "name": 1596070272000, "value": [1596070272000, 80] }, { "name": 1596070912000, "value": [1596070912000, 78] }, { "name": 1596107040000, "value": [1596107040000, 70] }, { "name": 1596124799000, "value": [1596124799000, 0] }];
//涓嬮潰鏄竴涓畝鍗曠殑demo锛屾柟渚垮睍绀烘暟鎹牸寮忓拰鏋勬垚
let option = {
@@ -114,6 +117,7 @@
const initMonthPayRecordEChart = () => {
const chartDom = document.getElementById('MonthPayRecord');
const myMonthPayChart = echarts.init(chartDom);
+ monthPayRecord.value = myMonthPayChart
var monthPayOption = {
title: {
text: '杩�12涓湀鐨勭即璐硅褰�',
@@ -224,6 +228,7 @@
const initMonthPayAmountEChart = () => {
const chartDom = document.getElementById('MonthPayAmount');
const myMonthPayAmountChart = echarts.init(chartDom);
+ monthPayAmount.value = myMonthPayAmountChart
var monthPayAmountOption = {
title: {
text: '杩�12涓湀鐨勭即璐归噾棰�',
@@ -250,6 +255,11 @@
myMonthPayAmountChart && myMonthPayAmountChart.resize();
}
onMounted(() => {
+ window.parent.addEventListener('resize', () => {
+ monthlyPayChart.value && monthlyPayChart.value.resize();
+ monthPayRecord.value && monthPayRecord.value.resize();
+ monthPayAmount.value && monthPayAmount.value.resize();
+ })
initMonthlyPayEChart();
initMonthPayRecordEChart()
initMonthPayAmountEChart()
diff --git a/src/views/project/ch/demo/Overview.html b/src/views/project/ch/demo/Overview.html
index 1e7c4bd..243bf08 100644
--- a/src/views/project/ch/demo/Overview.html
+++ b/src/views/project/ch/demo/Overview.html
@@ -11,9 +11,26 @@
<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>
+ <!-- <script src="/customer_list/ch/ai_html/lib/common.js"></script> -->
<link href="/customer_list/ch/ai_html/views/demo/css/variablesDemo.css" rel="stylesheet" type="text/css" />
<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" />
+ <style>
+ .el-dialog__header {
+ margin-right: 0;
+ padding: 8px 10px;
+ background: #528abe
+ }
+
+ .el-dialog__title {
+ color: #fff;
+ font-size: 14px;
+ }
+
+ .el-dialog__close {
+ color: #fff !important;
+ }
+ </style>
</head>
<body>
@@ -22,7 +39,7 @@
<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>
+ <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}</p>
</div>
</div>
<div class="top-center-chart">
@@ -62,12 +79,17 @@
</div>
</div>
</div>
+ <el-dialog v-model="state.isShowChartVisible" :title="state.volumeInfo.title" width="50%"
+ class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
+ <div id="businessTrends" class="w-full h-[500px]"></div>
+ </el-dialog>
</div>
</body>
<script>
- const { createApp, onMounted, ref, reactive } = Vue;
+ const { createApp, onMounted, ref, reactive, nextTick } = Vue;
const { Decoration3 } = DataV;
const demoOverViewChart = ref(null);
+ const demoBusinessTrendsChart = ref(null);
const App = createApp({
setup() {
let state = reactive({
@@ -124,82 +146,40 @@
dataList: [
{
+ id: 1,
title: '浠婃棩绱閿�閲�',
value: 755,
- config: {
- number: [755],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 2,
title: '鏈懆绱閿�閲�',
value: 3288,
- config: {
- number: [3288],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 3,
title: '鏈湀绱閿�閲�',
value: 14222,
- config: {
- number: [14222],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 4,
title: '瀛ｅ害绱閿�閲�',
value: 41022,
- config: {
- number: [41022],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 5,
title: '骞村害绱閿�閲�',
value: 176888,
- config: {
- number: [176888],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
{
+ id: 6,
title: '浠婃棩鐩爣閿�閲�',
value: 820,
- config: {
- number: [820],
- toFixed: 0,
- content: '{nt}',
- textAlign: 'left',
- style: {
- fontSize: 24,
- },
- },
+
},
],
completeObj: {
@@ -245,6 +225,12 @@
unit: '杈�',
},
intervalInstance: 0,
+ isShowChartVisible: false,
+ volumeInfo: {
+ id: null,
+ title: null,
+ value: null,
+ }
});
const getOverViewList = () => {
const iconList = [
@@ -271,11 +257,15 @@
};
onMounted(() => {
// getOverViewList();
- window.addEventListener('resize', () => {
- demoOverViewChart.value.resize();
- });
initOverViewEchart();
+
+ window.parent.addEventListener('resize', () => {
+ demoOverViewChart.value.resize();
+ demoBusinessTrendsChart.value.resize();
+ });
+
});
+ //鍒濆鍖栦粖鏃ヤ笟缁╁畬鎴愬害echart
const initOverViewEchart = () => {
var chartDom = document.getElementById('pond');
var myChart = echarts.init(chartDom);
@@ -293,7 +283,7 @@
},
legend: {
orient: 'vertical',
- left: '60%',
+ left: '54%',
y: 'center',
formatter: function (name) {
@@ -309,7 +299,7 @@
},
},
grid: {
- left: '45'
+ left: '25'
},
// title: {
// text: '76%',//涓绘爣棰樻枃鏈�
@@ -332,7 +322,7 @@
{
name: '浠婃棩涓氱哗瀹屾垚搴�',
type: 'pie',
- radius: ['40%', '70%'],
+ radius: ['40%', '60%'],
center: ['30%', '50%'],
avoidLabelOverlap: false,
label: {
@@ -350,8 +340,80 @@
option && myChart.setOption(option);
};
+ //鍒濆鍖栧脊绐梕chart
+ const initBusinessTrendsEchart = () => {
+ var chartDom = document.getElementById('businessTrends');
+ var businessTrendsChart = echarts.init(chartDom);
+ demoBusinessTrendsChart.value = businessTrendsChart;
+ const option = {
+ tooltip: {
+ trigger: 'axis',
+ },
+ grid: {
+ left: '3%', // 璋冩暣宸﹁竟璺�
+ right: '5%', // 璋冩暣鍙宠竟璺�
+ bottom: '3%', // 璋冩暣搴曢儴杈硅窛
+ top: '5%', // 璋冩暣椤堕儴杈硅窛
+ containLabel: true, // 纭繚鏍囩鍜岃酱鏍囬琚寘鍚湪瀹瑰櫒鍐�
+ },
+ xAxis: {
+ name: '鏃堕棿',
+ type: 'category',
+ minInterval: 3600 * 4 * 1000, //12
+ data: ['00:00', '05:00', '10:00', '15:00', '20:00', '23:45']
- return { state };
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value}',
+ },
+ },
+ dataZoom: {
+ type: 'inside',
+ },
+ series: [
+ {
+ name: '閿�鍞',
+ type: 'line',
+ data: [620, 1032, 701, 1234, 890, 1430, 1320, 1230, 1320, 1430, 1320], // 绀轰緥鏁版嵁锛屾ā鎷熻捣浼忔洿澶�
+ smooth: true, // 鎶樼嚎骞虫粦
+ lineStyle: {
+ width: 2,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ { offset: 0, color: '#62c1fe' },
+ { offset: 0.5, color: '#ad90f7' },
+ { offset: 1, color: '#e875f2' },
+ ]),
+ },
+ symbolSize: (value, params) => {
+ // 鑾峰彇鏁版嵁绯诲垪鐨勯暱搴�
+ const seriesLength = option.series[0].data.length;
+ // 涓棿鑺傜偣鏀惧ぇ
+ if (params.dataIndex === Math.floor(seriesLength / 2)) {
+ return 8; // 涓棿鑺傜偣鐨勫ぇ灏�
+ }
+ return 8; // 鍏朵粬鑺傜偣鐨勫ぇ灏�
+ },
+ },
+ ],
+ };
+ option && businessTrendsChart.setOption(option);
+ }
+ //鐐瑰嚮鏁版嵁椤瑰脊绐�
+ const handleDataItemClick = (item) => {
+ state.volumeInfo = item
+ nextTick(() => {
+ initBusinessTrendsEchart();
+ });
+ state.isShowChartVisible = true;
+ };
+ //鍏抽棴寮圭獥
+ const handleCloseChartVisible = () => {
+ state.isShowChartVisible = false;
+ }
+
+ return { state, handleDataItemClick, handleCloseChartVisible };
},
});
diff --git a/src/views/project/ch/demo/UnionPay.html b/src/views/project/ch/demo/UnionPay.html
index 9441265..a9a7e00 100644
--- a/src/views/project/ch/demo/UnionPay.html
+++ b/src/views/project/ch/demo/UnionPay.html
@@ -197,7 +197,7 @@
option && myChart.setOption(option);
};
onMounted(() => {
- window.addEventListener('resize', () => {
+ window.parent.addEventListener('resize', () => {
myChartRef.value.resize();
});
initUnionPayEChart();
diff --git a/src/views/project/ch/demo/WorkOrder.html b/src/views/project/ch/demo/WorkOrder.html
index 8adee85..44455bd 100644
--- a/src/views/project/ch/demo/WorkOrder.html
+++ b/src/views/project/ch/demo/WorkOrder.html
@@ -180,7 +180,7 @@
};
onMounted(() => {
// getOverViewList();
- window.addEventListener('resize', () => {
+ window.parent.addEventListener('resize', () => {
inspectionChart.value.resize();
salesRankRef.value.resize();
});
--
Gitblit v1.9.3