From a5893b10ad2bebcf2e2652b5f3e9fe8e4d2e7176 Mon Sep 17 00:00:00 2001
From: yangyin <1850366751@qq.com>
Date: 星期三, 07 八月 2024 14:12:48 +0800
Subject: [PATCH] feat:新增新区服务部客户情况
---
src/views/project/ch/demo/separateTobacco/CustomerSituation.html | 146 +++++++++++++
src/views/project/ch/demo/separateTobacco/StockToUseRatio.html | 151 +++++++++++++
customer_list/ch/ai_html/views/demo/html/separateTobacco/CustomerSituation.html | 146 +++++++++++++
src/views/project/ch/demo/separateTobacco/MarketComprehensive.html | 6
customer_list/ch/ai_html/views/demo/html/separateTobacco/StockToUseRatio.html | 151 +++++++++++++
customer_list/ch/ai_html/views/demo/html/separateTobacco/MarketComprehensive.html | 6
6 files changed, 600 insertions(+), 6 deletions(-)
diff --git a/customer_list/ch/ai_html/views/demo/html/separateTobacco/CustomerSituation.html b/customer_list/ch/ai_html/views/demo/html/separateTobacco/CustomerSituation.html
new file mode 100644
index 0000000..673b6e2
--- /dev/null
+++ b/customer_list/ch/ai_html/views/demo/html/separateTobacco/CustomerSituation.html
@@ -0,0 +1,146 @@
+<!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/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/ai_html/views/demo/js/customInstruction.js"></script>
+ <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" />
+ <script src="/ai_html/views/demo/js/echarts.min.js"></script>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="customerSituation">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full">
+ <div class="flex space-x-4 bg-white">
+ <div class="min-w-[300px] h-[320px] w-full">
+ <div class="text-[16px] my-5 text-center">鏂板尯鏈嶅姟閮ㄥ鎴锋儏鍐�</div>
+
+ <div class="flex-row text-center grid grid-cols-3">
+ <div v-for="(item,index) in state.CustomerSituationList" :key="item.ID">
+ <div class="text-[16px] text-[#000] ml-[10px] w-[200px]">{{ item.Name }}</div>
+ <div class="text-[16px] text-[#000] ml-[10px] w-[200px] mb-[10px]">{{ item.Value }}鎴�</div>
+ </div>
+ </div>
+ </div>
+ <div class="w-full h-[320px]" id="customerSituationBarChart"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const customerSituationBarChartDomRef = ref(null);
+
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ CustomerSituationList: [
+ {
+ ID: 1,
+ Name: '鐩磋惀缁堢',
+ Value: 3,
+ },
+ {
+ ID: 2,
+ Name: '鍚堜綔缁堢',
+ Value: 13,
+ },
+ {
+ ID: 3,
+ Name: '鍔犵洘缁堢',
+ Value: 2,
+ },
+ {
+ ID: 4,
+ Name: '鏂扮幇浠ｇ粓绔�',
+ Value: 3,
+ },
+ {
+ ID: 5,
+ Name: '鏅�氱粓绔�',
+ Value: 4,
+ },
+ ],
+ CustomerRateList: [
+ {
+ ID: 1,
+ Name: '鐜颁唬缁堢鏈堝害鎴峰潎浼氬憳娑堣垂绗旀暟鍗犳瘮',
+ Value: '32%',
+ },
+ {
+ ID: 2,
+ Name: '鐜颁唬缁堢鏃ュ潎钀ヤ笟棰�',
+ Value: '138.1涓囧厓',
+ },
+ {
+ ID: 3,
+ Name: '鍔犵洘缁堢',
+ Value: 22521.57,
+ },
+ ],
+ });
+ const initCustomerSituationBarChart = () => {
+ var chartDom = document.getElementById('customerSituationBarChart');
+ var customerSituationBarChartDom = echarts.init(chartDom);
+ customerSituationBarChartDomRef.value = customerSituationBarChartDom;
+ let option = {
+ legend: {
+ show: true, // 鏄剧ず鍥句緥
+ orient: 'vertical',
+ x: 'left', // 鍥句緥姘村钩浣嶇疆
+ y: 'center', // 鍥句緥鍨傜洿浣嶇疆
+ align: 'left',
+ left: '80%',
+ icon: 'square', // 鍥句緥褰㈢姸
+ itemWidth: 10, // 鍥句緥椤瑰搴�
+ itemHeight: 10, // 鍥句緥椤归珮搴�
+ itemGap: 20,
+ textStyle: {
+ opacity: 0.8,
+ },
+ },
+ series: [
+ {
+ name: 'Nightingale Chart',
+ type: 'pie',
+ radius: [50, 100],
+ center: ['50%', '50%'],
+ roseType: 'area',
+ itemStyle: {
+ borderRadius: 8,
+ },
+ data: [
+ { value: 40, name: '娑堣垂娲诲姩' },
+ { value: 38, name: '浜у搧娴嬭瘯' },
+ { value: 32, name: '閰掔被娲诲姩' },
+ { value: 30, name: '鏈夐棶蹇呯瓟' },
+ ],
+ },
+ ],
+ };
+
+ option && customerSituationBarChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ customerSituationBarChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initCustomerSituationBarChart();
+ });
+
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#customerSituation');
+ </script>
+</html>
diff --git a/customer_list/ch/ai_html/views/demo/html/separateTobacco/MarketComprehensive.html b/customer_list/ch/ai_html/views/demo/html/separateTobacco/MarketComprehensive.html
index 133dbf4..31ad041 100644
--- a/customer_list/ch/ai_html/views/demo/html/separateTobacco/MarketComprehensive.html
+++ b/customer_list/ch/ai_html/views/demo/html/separateTobacco/MarketComprehensive.html
@@ -65,8 +65,8 @@
});
const initMarketIntegrationCigarLineChart = () => {
var chartDom = document.getElementById('marketIntegrationLineChart');
- var marketIntegrationBarChartDom = echarts.init(chartDom);
- marketIntegrationLineChartDomRef.value = marketIntegrationBarChartDom;
+ var marketIntegrationLineChartDom = echarts.init(chartDom);
+ marketIntegrationLineChartDomRef.value = marketIntegrationLineChartDom;
let option = {
title: [
{
@@ -124,7 +124,7 @@
],
};
- option && marketIntegrationBarChartDom.setOption(option);
+ option && marketIntegrationLineChartDom.setOption(option);
};
const chartContainerResize = ({ width, height }) => {
marketIntegrationLineChartDomRef.value.resize();
diff --git a/customer_list/ch/ai_html/views/demo/html/separateTobacco/StockToUseRatio.html b/customer_list/ch/ai_html/views/demo/html/separateTobacco/StockToUseRatio.html
new file mode 100644
index 0000000..d898c17
--- /dev/null
+++ b/customer_list/ch/ai_html/views/demo/html/separateTobacco/StockToUseRatio.html
@@ -0,0 +1,151 @@
+<!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/iframe-resizer/child-5.1.5.js" async></script>
+ <script src="/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/ai_html/views/demo/js/customInstruction.js"></script>
+ <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" />
+ <script src="/ai_html/views/demo/js/echarts.min.js"></script>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="stockToUseBoard">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full bg-white">
+ <div class="w-full bg-white h-[280px]" id="stockToUseLineChart"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const stockToUseLineChartDomRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ stockToUseBoardList: [
+ {
+ ID: 1,
+ stockDate: '2024-4-01',
+ value: 120,
+ },
+ {
+ ID: 2,
+ stockDate: '2024-5-01',
+ value: 70,
+ },
+ {
+ ID: 3,
+ stockDate: '2024-6-01',
+ value: 50,
+ },
+ {
+ ID: 4,
+ stockDate: '2024-7-01',
+ value: 67,
+ },
+ {
+ ID: 5,
+ stockDate: '2024-8-01',
+ value: 74,
+ },
+ ],
+
+ consumptionSurveyList: [
+ {
+ ID: 1,
+ stockDate: '2022-4-01',
+ value: 120,
+ },
+ {
+ ID: 2,
+ stockDate: '2023-5-01',
+ value: 70,
+ },
+ {
+ ID: 3,
+ stockDate: '2024-6-01',
+ value: 50,
+ },
+ ],
+ });
+ const initStockToUseLineChart = () => {
+ const lineXData = state.stockToUseBoardList.map((item) => item.stockDate.slice(2, 6) + '鏈�');
+ var chartDom = document.getElementById('stockToUseLineChart');
+ var stockToUseBarChartDom = echarts.init(chartDom);
+ stockToUseLineChartDomRef.value = stockToUseBarChartDom;
+ var option = {
+ title: [
+ {
+ text: '鍛ㄧぞ浼氬瓨閿�姣�',
+ left: 50,
+ top: 10,
+ textStyle: {
+ fontSize: 20,
+ },
+ },
+ ],
+ grid: {
+ left: 10,
+ right: 40,
+ },
+ legend: {
+ top: 30,
+ },
+ xAxis: {
+ type: 'category',
+ data: lineXData,
+ },
+ yAxis: {
+ show: false,
+ },
+
+ series: [
+ {
+ data: [150, 230, 224, 218, 135],
+ type: 'line',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#8470FF' },
+ { offset: 0.5, color: 'rgba(182,229,187,0.3)' },
+ { offset: 1, color: 'rgba(182,229,187,0.1)' },
+ ]),
+ },
+ lineStyle: {
+ color: '#8470FF',
+ width: 3,
+ },
+ itemStyle: {
+ color: '#8470FF',
+ },
+ label: {
+ show: true,
+ position: 'top', // 椤堕儴鏄剧ず
+ },
+ },
+ ],
+ };
+
+ option && stockToUseBarChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ stockToUseLineChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initStockToUseLineChart();
+ });
+
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#stockToUseBoard');
+ </script>
+</html>
diff --git a/src/views/project/ch/demo/separateTobacco/CustomerSituation.html b/src/views/project/ch/demo/separateTobacco/CustomerSituation.html
new file mode 100644
index 0000000..c6ef62d
--- /dev/null
+++ b/src/views/project/ch/demo/separateTobacco/CustomerSituation.html
@@ -0,0 +1,146 @@
+<!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/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>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.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>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="customerSituation">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full">
+ <div class="flex space-x-4 bg-white">
+ <div class="min-w-[300px] h-[320px] w-full">
+ <div class="text-[16px] my-5 text-center">鏂板尯鏈嶅姟閮ㄥ鎴锋儏鍐�</div>
+
+ <div class="flex-row text-center grid grid-cols-3">
+ <div v-for="(item,index) in state.CustomerSituationList" :key="item.ID">
+ <div class="text-[16px] text-[#000] ml-[10px] w-[200px]">{{ item.Name }}</div>
+ <div class="text-[16px] text-[#000] ml-[10px] w-[200px] mb-[10px]">{{ item.Value }}鎴�</div>
+ </div>
+ </div>
+ </div>
+ <div class="w-full h-[320px]" id="customerSituationBarChart"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const customerSituationBarChartDomRef = ref(null);
+
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ CustomerSituationList: [
+ {
+ ID: 1,
+ Name: '鐩磋惀缁堢',
+ Value: 3,
+ },
+ {
+ ID: 2,
+ Name: '鍚堜綔缁堢',
+ Value: 13,
+ },
+ {
+ ID: 3,
+ Name: '鍔犵洘缁堢',
+ Value: 2,
+ },
+ {
+ ID: 4,
+ Name: '鏂扮幇浠ｇ粓绔�',
+ Value: 3,
+ },
+ {
+ ID: 5,
+ Name: '鏅�氱粓绔�',
+ Value: 4,
+ },
+ ],
+ CustomerRateList: [
+ {
+ ID: 1,
+ Name: '鐜颁唬缁堢鏈堝害鎴峰潎浼氬憳娑堣垂绗旀暟鍗犳瘮',
+ Value: '32%',
+ },
+ {
+ ID: 2,
+ Name: '鐜颁唬缁堢鏃ュ潎钀ヤ笟棰�',
+ Value: '138.1涓囧厓',
+ },
+ {
+ ID: 3,
+ Name: '鍔犵洘缁堢',
+ Value: 22521.57,
+ },
+ ],
+ });
+ const initCustomerSituationBarChart = () => {
+ var chartDom = document.getElementById('customerSituationBarChart');
+ var customerSituationBarChartDom = echarts.init(chartDom);
+ customerSituationBarChartDomRef.value = customerSituationBarChartDom;
+ let option = {
+ legend: {
+ show: true, // 鏄剧ず鍥句緥
+ orient: 'vertical',
+ x: 'left', // 鍥句緥姘村钩浣嶇疆
+ y: 'center', // 鍥句緥鍨傜洿浣嶇疆
+ align: 'left',
+ left: '80%',
+ icon: 'square', // 鍥句緥褰㈢姸
+ itemWidth: 10, // 鍥句緥椤瑰搴�
+ itemHeight: 10, // 鍥句緥椤归珮搴�
+ itemGap: 20,
+ textStyle: {
+ opacity: 0.8,
+ },
+ },
+ series: [
+ {
+ name: 'Nightingale Chart',
+ type: 'pie',
+ radius: [50, 100],
+ center: ['50%', '50%'],
+ roseType: 'area',
+ itemStyle: {
+ borderRadius: 8,
+ },
+ data: [
+ { value: 40, name: '娑堣垂娲诲姩' },
+ { value: 38, name: '浜у搧娴嬭瘯' },
+ { value: 32, name: '閰掔被娲诲姩' },
+ { value: 30, name: '鏈夐棶蹇呯瓟' },
+ ],
+ },
+ ],
+ };
+
+ option && customerSituationBarChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ customerSituationBarChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initCustomerSituationBarChart();
+ });
+
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#customerSituation');
+ </script>
+</html>
diff --git a/src/views/project/ch/demo/separateTobacco/MarketComprehensive.html b/src/views/project/ch/demo/separateTobacco/MarketComprehensive.html
index c599c83..42718f2 100644
--- a/src/views/project/ch/demo/separateTobacco/MarketComprehensive.html
+++ b/src/views/project/ch/demo/separateTobacco/MarketComprehensive.html
@@ -65,8 +65,8 @@
});
const initMarketIntegrationCigarLineChart = () => {
var chartDom = document.getElementById('marketIntegrationLineChart');
- var marketIntegrationBarChartDom = echarts.init(chartDom);
- marketIntegrationLineChartDomRef.value = marketIntegrationBarChartDom;
+ var marketIntegrationLineChartDom = echarts.init(chartDom);
+ marketIntegrationLineChartDomRef.value = marketIntegrationLineChartDom;
let option = {
title: [
{
@@ -124,7 +124,7 @@
],
};
- option && marketIntegrationBarChartDom.setOption(option);
+ option && marketIntegrationLineChartDom.setOption(option);
};
const chartContainerResize = ({ width, height }) => {
marketIntegrationLineChartDomRef.value.resize();
diff --git a/src/views/project/ch/demo/separateTobacco/StockToUseRatio.html b/src/views/project/ch/demo/separateTobacco/StockToUseRatio.html
new file mode 100644
index 0000000..4ec29da
--- /dev/null
+++ b/src/views/project/ch/demo/separateTobacco/StockToUseRatio.html
@@ -0,0 +1,151 @@
+<!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/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>
+ <script src="/customer_list/ch/ai_html/views/demo/js/index.full.js"></script>
+ <script src="/customer_list/ch/ai_html/views/demo/js/customInstruction.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>
+ </head>
+
+ <body>
+ <div class="w-full h-full bg-[#f2f4f8] px-[5px] py-[5px]" id="stockToUseBoard">
+ <div class="bg-[rgb(242,244,248)] space-y-1">
+ <div v-resize="chartContainerResize" class="w-full h-full bg-white">
+ <div class="w-full bg-white h-[280px]" id="stockToUseLineChart"></div>
+ </div>
+ </div>
+ </div>
+ </body>
+ <script>
+ const { createApp, onMounted, ref, reactive } = Vue;
+ const stockToUseLineChartDomRef = ref(null);
+ const App = createApp({
+ setup() {
+ let state = reactive({
+ stockToUseBoardList: [
+ {
+ ID: 1,
+ stockDate: '2024-4-01',
+ value: 120,
+ },
+ {
+ ID: 2,
+ stockDate: '2024-5-01',
+ value: 70,
+ },
+ {
+ ID: 3,
+ stockDate: '2024-6-01',
+ value: 50,
+ },
+ {
+ ID: 4,
+ stockDate: '2024-7-01',
+ value: 67,
+ },
+ {
+ ID: 5,
+ stockDate: '2024-8-01',
+ value: 74,
+ },
+ ],
+
+ consumptionSurveyList: [
+ {
+ ID: 1,
+ stockDate: '2022-4-01',
+ value: 120,
+ },
+ {
+ ID: 2,
+ stockDate: '2023-5-01',
+ value: 70,
+ },
+ {
+ ID: 3,
+ stockDate: '2024-6-01',
+ value: 50,
+ },
+ ],
+ });
+ const initStockToUseLineChart = () => {
+ const lineXData = state.stockToUseBoardList.map((item) => item.stockDate.slice(2, 6) + '鏈�');
+ var chartDom = document.getElementById('stockToUseLineChart');
+ var stockToUseBarChartDom = echarts.init(chartDom);
+ stockToUseLineChartDomRef.value = stockToUseBarChartDom;
+ var option = {
+ title: [
+ {
+ text: '鍛ㄧぞ浼氬瓨閿�姣�',
+ left: 50,
+ top: 10,
+ textStyle: {
+ fontSize: 20,
+ },
+ },
+ ],
+ grid: {
+ left: 10,
+ right: 40,
+ },
+ legend: {
+ top: 30,
+ },
+ xAxis: {
+ type: 'category',
+ data: lineXData,
+ },
+ yAxis: {
+ show: false,
+ },
+
+ series: [
+ {
+ data: [150, 230, 224, 218, 135],
+ type: 'line',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#8470FF' },
+ { offset: 0.5, color: 'rgba(182,229,187,0.3)' },
+ { offset: 1, color: 'rgba(182,229,187,0.1)' },
+ ]),
+ },
+ lineStyle: {
+ color: '#8470FF',
+ width: 3,
+ },
+ itemStyle: {
+ color: '#8470FF',
+ },
+ label: {
+ show: true,
+ position: 'top', // 椤堕儴鏄剧ず
+ },
+ },
+ ],
+ };
+
+ option && stockToUseBarChartDom.setOption(option);
+ };
+ const chartContainerResize = ({ width, height }) => {
+ stockToUseLineChartDomRef.value.resize();
+ };
+ onMounted(() => {
+ initStockToUseLineChart();
+ });
+
+ return { state, chartContainerResize };
+ },
+ });
+ App.use(ElementPlus);
+ elementResizeDirective(App);
+ App.mount('#stockToUseBoard');
+ </script>
+</html>
--
Gitblit v1.9.3