WI/Web.V1.0.git

yangyin

2024-07-19 611a76d81950b33224b7fa4e69b2c3a74b85ceb6

fix: 增加图表弹窗

已修改2个文件

	customer_list/ch/ai_html/views/demo/html/WorkOrder.html	109 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/project/ch/demo/WorkOrder.html	109 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 customer_list/ch/ai_html/views/demo/html/WorkOrder.html

@@ -14,6 +14,22 @@
    <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 +38,8 @@
            <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}}<span class="text-[13px] ">
                    <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}<span
                            class="text-[13px] ">
                            {{' '+item.unit}}</span></p>
                </div>
            </div>
@@ -57,14 +74,19 @@
                </div>
            </div>
        </div>
        <el-dialog v-model="state.isShowChartVisible" :title="state.inspectionInfo.title" width="50%"
            class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
            <div id="inspectionTrends" 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 inspectionChart = ref(null);
    const salesRankRef = ref(null);
    const inspectionTrendsChart = ref(null);
    const App = createApp({
        setup() {
            let state = reactive({
@@ -154,6 +176,12 @@
                        unit: '个',
                    },
                ],
                isShowChartVisible: false,
                inspectionInfo: {
                    id: null,
                    title: null,
                    value: null,
                }
            });
            const getOverViewList = () => {
                const iconList = [
@@ -225,6 +253,66 @@
                    series: [{ type: 'bar' }, { type: 'bar' }]
                };
                option && myInspectChart.setOption(option);
            }
            //初始化弹窗echart
            const initInspectionTrendsEchart = () => {
                var chartDom = document.getElementById('inspectionTrends');
                var businessTrendsChart = echarts.init(chartDom);
                inspectionTrendsChart.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']

                    },
                    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 drawSalesRanking = () => {
@@ -315,8 +403,23 @@
                };
                salesRankingElement.setOption(option);
            };
            //点击数据项弹窗
            const handleDataItemClick = (item) => {
                state.inspectionInfo = item
                nextTick(() => {
                    initInspectionTrendsEchart();
                });
                window.parent.addEventListener('resize', () => {
                    inspectionTrendsChart.value.resize();
                });
                state.isShowChartVisible = true;
            };

            return { state };
            //关闭弹窗
            const handleCloseChartVisible = () => {
                state.isShowChartVisible = false;
            }
            return { state, handleDataItemClick, handleCloseChartVisible };
        },
    });


 src/views/project/ch/demo/WorkOrder.html

@@ -14,6 +14,22 @@
    <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 +38,8 @@
            <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}}<span class="text-[13px] ">
                    <p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}<span
                            class="text-[13px] ">
                            {{' '+item.unit}}</span></p>
                </div>
            </div>
@@ -57,14 +74,19 @@
                </div>
            </div>
        </div>
        <el-dialog v-model="state.isShowChartVisible" :title="state.inspectionInfo.title" width="50%"
            class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
            <div id="inspectionTrends" 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 inspectionChart = ref(null);
    const salesRankRef = ref(null);
    const inspectionTrendsChart = ref(null);
    const App = createApp({
        setup() {
            let state = reactive({
@@ -154,6 +176,12 @@
                        unit: '个',
                    },
                ],
                isShowChartVisible: false,
                inspectionInfo: {
                    id: null,
                    title: null,
                    value: null,
                }
            });
            const getOverViewList = () => {
                const iconList = [
@@ -225,6 +253,66 @@
                    series: [{ type: 'bar' }, { type: 'bar' }]
                };
                option && myInspectChart.setOption(option);
            }
            //初始化弹窗echart
            const initInspectionTrendsEchart = () => {
                var chartDom = document.getElementById('inspectionTrends');
                var businessTrendsChart = echarts.init(chartDom);
                inspectionTrendsChart.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']

                    },
                    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 drawSalesRanking = () => {
@@ -315,8 +403,23 @@
                };
                salesRankingElement.setOption(option);
            };
            //点击数据项弹窗
            const handleDataItemClick = (item) => {
                state.inspectionInfo = item
                nextTick(() => {
                    initInspectionTrendsEchart();
                });
                window.parent.addEventListener('resize', () => {
                    inspectionTrendsChart.value.resize();
                });
                state.isShowChartVisible = true;
            };

            return { state };
            //关闭弹窗
            const handleCloseChartVisible = () => {
                state.isShowChartVisible = false;
            }
            return { state, handleDataItemClick, handleCloseChartVisible };
        },
    });

			@@ -14,6 +14,22 @@
			<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 +38,8 @@
			<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}}<span class="text-[13px] ">
			<p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}<span
			class="text-[13px] ">
			{{' '+item.unit}}</span></p>
			</div>
			</div>
			@@ -57,14 +74,19 @@
			</div>
			</div>
			</div>
			<el-dialog v-model="state.isShowChartVisible" :title="state.inspectionInfo.title" width="50%"
			class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
			<div id="inspectionTrends" 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 inspectionChart = ref(null);
			const salesRankRef = ref(null);
			const inspectionTrendsChart = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			@@ -154,6 +176,12 @@
			unit: '个',
			},
			],
			isShowChartVisible: false,
			inspectionInfo: {
			id: null,
			title: null,
			value: null,
			}
			});
			const getOverViewList = () => {
			const iconList = [
			@@ -225,6 +253,66 @@
			series: [{ type: 'bar' }, { type: 'bar' }]
			};
			option && myInspectChart.setOption(option);
			}
			//初始化弹窗echart
			const initInspectionTrendsEchart = () => {
			var chartDom = document.getElementById('inspectionTrends');
			var businessTrendsChart = echarts.init(chartDom);
			inspectionTrendsChart.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']

			},
			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 drawSalesRanking = () => {
			@@ -315,8 +403,23 @@
			};
			salesRankingElement.setOption(option);
			};
			//点击数据项弹窗
			const handleDataItemClick = (item) => {
			state.inspectionInfo = item
			nextTick(() => {
			initInspectionTrendsEchart();
			});
			window.parent.addEventListener('resize', () => {
			inspectionTrendsChart.value.resize();
			});
			state.isShowChartVisible = true;
			};

			return { state };
			//关闭弹窗
			const handleCloseChartVisible = () => {
			state.isShowChartVisible = false;
			}
			return { state, handleDataItemClick, handleCloseChartVisible };
			},
			});

			@@ -14,6 +14,22 @@
			<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 +38,8 @@
			<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}}<span class="text-[13px] ">
			<p class="data-item-desc cursor-pointer" @click="handleDataItemClick(item)">{{item.value}}<span
			class="text-[13px] ">
			{{' '+item.unit}}</span></p>
			</div>
			</div>
			@@ -57,14 +74,19 @@
			</div>
			</div>
			</div>
			<el-dialog v-model="state.isShowChartVisible" :title="state.inspectionInfo.title" width="50%"
			class="px-[unset] py-[unset]" :before-close="handleCloseChartVisible">
			<div id="inspectionTrends" 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 inspectionChart = ref(null);
			const salesRankRef = ref(null);
			const inspectionTrendsChart = ref(null);
			const App = createApp({
			setup() {
			let state = reactive({
			@@ -154,6 +176,12 @@
			unit: '个',
			},
			],
			isShowChartVisible: false,
			inspectionInfo: {
			id: null,
			title: null,
			value: null,
			}
			});
			const getOverViewList = () => {
			const iconList = [
			@@ -225,6 +253,66 @@
			series: [{ type: 'bar' }, { type: 'bar' }]
			};
			option && myInspectChart.setOption(option);
			}
			//初始化弹窗echart
			const initInspectionTrendsEchart = () => {
			var chartDom = document.getElementById('inspectionTrends');
			var businessTrendsChart = echarts.init(chartDom);
			inspectionTrendsChart.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']

			},
			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 drawSalesRanking = () => {
			@@ -315,8 +403,23 @@
			};
			salesRankingElement.setOption(option);
			};
			//点击数据项弹窗
			const handleDataItemClick = (item) => {
			state.inspectionInfo = item
			nextTick(() => {
			initInspectionTrendsEchart();
			});
			window.parent.addEventListener('resize', () => {
			inspectionTrendsChart.value.resize();
			});
			state.isShowChartVisible = true;
			};

			return { state };
			//关闭弹窗
			const handleCloseChartVisible = () => {
			state.isShowChartVisible = false;
			}
			return { state, handleDataItemClick, handleCloseChartVisible };
			},
			});